Can someone tell me what's wrong with the code?

Can someone tell me what's wrong with the code?
0

#1

I keep getting an error with my code.
Do you see where I’m going wrong with this ?

var note1, note2, note3, note4, note5, note6, note7;

//Create 7

note1 = document.getElementById('cNote');
note2 = document.getElementById('dNote');
note3 = document.getElementById('eNote');
note4 = document.getElementById('fNote');
note5 = document.getElementById('gNote');
note6 = document.getElementById('aNote');
note7 = document.getElementById('bNote');

//Link all sounds

var sound1, sound2, sound3, sound4, sound5, sound6, sound7;
sound1 = document.getElementsByTagName('audio')[0];
sound2 = document.getElementsByTagName('audio')[1];
sound3 = document.getElementsByTagName('audio')[2];
sound4 = document.getElementsByTagName('audio')[3];
sound5 = document.getElementsByTagName('audio')[4];
sound6 = document.getElementsByTagName('audio')[5];
sound7 = document.getElementsByTagName('audio')[6];

//Create button functions;

function  cButton() {
	sound1.play();
}

function dButton(){
	sound2.play();
}

function eButton() {
	sound3.play();
}

function  fButton() {
	sound4.play();
}

function  gButton() {
	sound5.play();
}

function  aButton() {
	sound6.play();
}

function  bButton() {
	sound7.play();
}

#2

Hi, what is the error you are receiving?
Also, are you executing the code after the window has fully loaded and the DOM is ready?


#3

It would help to see it in context. Do you have a CodePen or something you could link to?


#4

This is the html to it

<!--
<head>
	<title>Piano</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="container">
	<div class="grid-container">
		<div id = "cNote" class="grid-item" onclick="cButton()"><h1>C</h1></div>
		<div id = "dNote" class="grid-item" onclick="dButton()"><h1>D</h1></div>
		<div id = "eNote" class="grid-item" onclick="eButton()"><h1>E</h1></div>
		<div id = "fNote" class="grid-item" onclick="fButton()"><h1>F</h1></div>
		<div id = "gNote" class="grid-item" onclick="gButton()"><h1>G</h1></div>
		<div id = "aNote" class="grid-item" onclick="aButton()"><h1>A</h1></div>
		<div id = "bNote" class="grid-item" onclick="bButton()"><h1>B</h1></div>
	</div>
</div>
	<audio>
		<source src="sound/note1_c.wav">
	</audio>
	<audio>
		<source src="sound/note2_d.wav">
	</audio>
		<source src="sound/note3_e.wav">
		<source src="sound/note4_f.wav">
		<source src="sound/note5_g.wav">
		<source src="sound/note6_a.wav">
		<source src="sound/note7_b.wav">
	
	<script type="text/javascript" src="actions.js">

	</script>
-->

#5

Sorry, I had a feeling I should have added it, but wasn’t sure how this website even works. I don’t have a Codepen, i don’t know what that even is. I’m new to all of this. My code doesn’t show on the website unfortunately. I have some h1 tags in my code and it just pops up as the actual tag rather than code unfortunately…


#6

You can copy and paste your html, css, and javascript into codepen and then link it if you want to.

Also on these forums when you post code wrap it with triple backticks (` not ’ or ") Like ‘’‘code’’’ example:

var note1, note2, note3, note4, note5, note6, note7;

//Create 7

note1 = document.getElementById(‘cNote’);
note2 = document.getElementById(‘dNote’);
note3 = document.getElementById(‘eNote’);
note4 = document.getElementById(‘fNote’);
note5 = document.getElementById(‘gNote’);
note6 = document.getElementById(‘aNote’);
note7 = document.getElementById(‘bNote’);

//Link all sounds

var sound1, sound2, sound3, sound4, sound5, sound6, sound7;
sound1 = document.getElementsByTagName(‘audio’)[0];
sound2 = document.getElementsByTagName(‘audio’)[1];
sound3 = document.getElementsByTagName(‘audio’)[2];
sound4 = document.getElementsByTagName(‘audio’)[3];
sound5 = document.getElementsByTagName(‘audio’)[4];
sound6 = document.getElementsByTagName(‘audio’)[5];
sound7 = document.getElementsByTagName(‘audio’)[6];

//Create button functions;

function cButton() {
sound1.play();
}

function dButton(){
sound2.play();
}

function eButton() {
sound3.play();
}

function fButton() {
sound4.play();
}

function gButton() {
sound5.play();
}

function aButton() {
sound6.play();
}

function bButton() {
sound7.play();
}

#7

Where are you writing your code, out of curiosity? CodePen is the site FCC used to endrose for the front-end projects. It has useful things like syntax highlighting, error messages, and a preview that updates as you type. I would hazard a guess that your h1 tags have syntactical errors (like a missing < or / mark), so they’re being rendered as plain text.


#8

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.


#9

onclick="this is a string, it isn't going to do anything".

Vs

onclick=thisIsAFunction()


#10

your play() method doesnt do anything. You gotta explicitly tell play() what it should do whenever its’s being called. maybe it can change an attribute in your audio tag or something.


#11

Hi, sound3 to sound7 are undefined. In the html code there is only the source element but not the audio one. Also the closing tag of the body is missing.
You’d also want to put your js code in the window.onload function so that is fires only when all the content of the page is loaded.


window.onload = function(){
  //your js code here
}

#12

I found out what the issue was. Thank you all for assistance.