My button with id “jump-button” is not working at all. Whenever it is clicked nothing will happen. (I have added a alert(); to the onclick attribute so I know when the button is working.
The other two buttons (next and prev) are working absolutely fine.
<body>
<div id="fact">Fact #1: In 2002, the most popular boat name in the U.S. was Liberty</div>
<input id="next" type="image" src="images/next-button.png" name="next" value="Next" onClick="num++;document.getElementById('fact').innerHTML=getFact(num);"/>
<input id="prev" type="image" src="images/prev-button.png" name="previous" value="Prev" onClick="num--;document.getElementById('fact').innerHTML=getFact(num);"/>
<p id="jump-text">Jump To Fact #</p>
<input id="textarea" type="text" name="factNumber" />
<input id="jump-button" type="image" src="images/jump-button.png" name="jump" value="Jump" onClick="alert();num = document.getElementById('textarea').value;document.getElementById('fact').innerHTML='getFact(num);"/>
</body>
External JS File (it has been inported in the HTML header)
facts = [element1, element2, ... wayy too many elements to have them all here];
var num = 1;
function getFact (num){
return 'Fact #' + num + ' ' + facts[num-1];
}
As you can see, this is a very simple app being built (something that just runs through various interesting facts). I am fairly new to javascript, so please excuse me if I made a very blatant error.
My CSS file is very nice and simple too, I doubt it it causing the trouble, but if it is required I will shot it upon request.
Lastly, the rest of the html <head> is also very simple (only consists of some meta data, title, css and javascript imports).
If anyone needs more information to help me get the “jump” button working, please ask.
You have a stray
'in your inlineonClickattribute.