I'm trying to make a simple webpage with javascript. The html works fine, but I can't get the javascript to run. I wanted to know if anyone could give me an idea what was wrong with it?
The html and javascript file and are both in the same folder and I made sure I didn't do anything careless
Here's the code:
var intOne;
var intTwo;
var sec;
window.alert("Testing")
function checkAnswer()
{
if(quiz.outer.answerbox.value === intOne+intTwo)
{
alert("You smart. You loyal.");
alert("Answer is " + parseInt(intOne+intTwo));
} else {
alert("Another One.");
quiz.outer.answerbox.value="";
}
}
function displayQuestion()
{
intOne = Math.floor((Math.random() * 100) + 1);
intTwo = Math.floor((Math.random() * 100) + 1);
document.getElementById('quiz.outer.question').innerText= "What is " + intOne + " + " + intTwo + "?";
quiz.answerbox.value="";
startTimer();
}
function startTimer()
{
sec = 0;
window.setInterval(updateTime(), 1000);
}
function updateTime()
{
sec++
timer.innerText=sec;
}
<!Doctype html>
<html>
<head>
<title>Adding Quiz</title>
<script type="text/javascript" src="addingNumbers"></script>
</head>
<body onload="displayQuestion()">
<h1>Adding Quiz<h1>
<div style="color:blue">
<form name="quiz" action="#">
<p id="outer">
<p id="question">something</p>
<input type="output" id="answerbox" value=""><br>
<input type="button" value="Check" onClick="checkAnswer()">
</p>
</div>
<br>
<p>Time spent on this question so far: <strong id="timer">0</strong> seconds </p>
</body>
</html>
I'm trying to make a simple webpage with javascript. The html works fine, but I can't get the javascript to run. I wanted to know if anyone could give me an idea what was wrong with it?
The html and javascript file and are both in the same folder and I made sure I didn't do anything careless
Here's the code:
var intOne;
var intTwo;
var sec;
window.alert("Testing")
function checkAnswer()
{
if(quiz.outer.answerbox.value === intOne+intTwo)
{
alert("You smart. You loyal.");
alert("Answer is " + parseInt(intOne+intTwo));
} else {
alert("Another One.");
quiz.outer.answerbox.value="";
}
}
function displayQuestion()
{
intOne = Math.floor((Math.random() * 100) + 1);
intTwo = Math.floor((Math.random() * 100) + 1);
document.getElementById('quiz.outer.question').innerText= "What is " + intOne + " + " + intTwo + "?";
quiz.answerbox.value="";
startTimer();
}
function startTimer()
{
sec = 0;
window.setInterval(updateTime(), 1000);
}
function updateTime()
{
sec++
timer.innerText=sec;
}
<!Doctype html>
<html>
<head>
<title>Adding Quiz</title>
<script type="text/javascript" src="addingNumbers"></script>
</head>
<body onload="displayQuestion()">
<h1>Adding Quiz<h1>
<div style="color:blue">
<form name="quiz" action="#">
<p id="outer">
<p id="question">something</p>
<input type="output" id="answerbox" value=""><br>
<input type="button" value="Check" onClick="checkAnswer()">
</p>
</div>
<br>
<p>Time spent on this question so far: <strong id="timer">0</strong> seconds </p>
</body>
</html>
Oddly enough, the javascript appeared to work when i was posting the snippet, as I received an alert when I ran the code.
Share Improve this question edited Mar 17, 2016 at 10:20 Endless 38.2k13 gold badges116 silver badges137 bronze badges asked Mar 15, 2016 at 20:44 Jibril BurleighJibril Burleigh 1041 gold badge1 silver badge10 bronze badges 8-
7
src="addingNumbers"
in yourscript
tag - you're missing the file extension. – tymeJV Commented Mar 15, 2016 at 20:45 - 3 When developing on the web, the developer console is your best friend - you can use it to track network activity, see errors, and all that useful stuff. Look at it with your current code and see what isn't working – Nick Zuber Commented Mar 15, 2016 at 20:47
-
1
" I made sure I didn't do anything careless, like forget to add the file extention " while the
src
attribute of yourscript
tag leads toaddingNumbers
? – KarelG Commented Mar 15, 2016 at 20:51 -
2
This looks like a joke, your ment says
I made sure I didn't do anything careless, like forget to add the file extention
but you did<script type="text/javascript" src="addingNumbers">
Check developer.chrome./devtools for 404s – Ruan Mendes Commented Mar 15, 2016 at 20:51 - 4 Why all the down votes? He is a beginner and need help as to why his javascript file won't load/execute – Endless Commented Mar 15, 2016 at 22:06
2 Answers
Reset to default 2Other possible answer if it's is a correct path but won't load anyway could be
- That you have something blocking javascript file from loading like NoScript, adblock or that you have blocked scripts from loading in your browsers preference/settings
- Your resources could have been cached by the browser/server and any attempt at changing the code don't make any different until you clear the browsers cache
- Script won't execute the code if the server adds
content-type: text/plain
header to the script file that are beeing requested. Even if you try to addtype="text/javascript"
. - The page you loaded could also have some Content Security Policy (CSP) header blocking any script file from loading
- If it's inside a iframe then you could have problem with the sandbox attribute
<base>
tag could possible change the place it looks for loading any resources (but it looks like you don't have that problem judging by your html code)- You might even have a proxy somewhere that strips out
<script>
tags... - A good thumb rule is to always use lowercase letters and use
-
insteadadding-numbers.js
instead ofaddingNumbers.js
(maybe some servers, filesystem, browser can have problem distinguish lowercase/uppercase and treat them them differently) I have had problem with that when using git...
What happens if you try to open the script url in the browser directly?
Try using absolute path if that helps...
And of course use the console/network tab to look for what the problem could be
My guess is that it's just simply not found and that the src="addingNumbers"
is a wrong path
Are both the html and javascript file even in the same folder?
You have a bug in your code, but this would not keep it from running.
You are calling the method updateTime
and assigning what it returns to the Interval
window.setInterval(updateTime(), 1000);
You need to drop the ()
window.setInterval(updateTime, 1000);
Side note, intervals are not accurate for keeping time. If you're wondering why using setInterval()
is not accurate, please read this answer.
Now you need to figure out why the file is not loading. To do that you need to look at the console and the network tab. The console will show any JavaScript errors and the network tab will show if any files did not load (404 not found). As others have pointed out, you are not including a file extension in the script tag.
<script type="text/javascript" src="addingNumbers.js"></script>