Hello,
I am a new programmer looking for help as my external script is not working. I get no response and my console is not showing any variables. I ran a test script and that appears to be working. I am not sure if I am using console correct but when I use the start button, I get nothing back. Any help would be greatly appreciated.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!--<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="count.js" type="text/javascript"></script>-->
<title></title>
</head>
<body onload="setUp()">
<h1>Numbers in a block</h1>
<p>
<input type="text" id="beginTimeInput"> to <input type="text" id="endTimeInput">
<button type="button" id="startButton">Start</button>
</p>
<ul id="show"></ul>
<form>
<input type="button" value="Result" onclick="display()"/>
</form>
<script src="count.js" type="text/javascript"></script>
</body>
</html>
function setUp() {
// Getting the elements we need
let firstSubmit = document.getElementById(‘beginTimeInput’);
let secondSubmit = document.getElementById(‘endTimeInput’);
let startButton = document.getElementById(‘startButton’);
let showElement = document.getElementById(“show”);
// Giving the startButton the onclick functionality
startButton.onclick = function() {
// Let us clean up and removing all the content of the showElement
// to always start "fresh"
showElement.innerHTML = '';
// Getting the values of the inputs.
// Pay attention, the user could have entered not a number or nothing!
// Empty String will become 0 with Number("")
let firstNumber = Number(firstSubmit.value);
let secondNumber = Number(secondSubmit.value);
// We do a quick check if the user enters zwo numbers, then the counter
// is allowed to start, otherwise we don't start counting. This is not the
// best solution, but you just started with JS so we keep it simple.
// isNaN is a function to check if the passed value is not a number.
// !isNan means then "is not not a number"... i hope you get the point
// If firstNumber and secondNumber are the same, we also don't start.
if (!isNaN(firstNumber) && !isNaN(secondNumber) && firstNumber != secondNumber) {
// Set the result to firstNumber - 1, so at the first interval tick
// it get increased to firstNumber and then is added in
let result = firstNumber - 1;
// Set an interval to count from firstNumber up to secondNumber
// adding a new LI-Element to the showElement (in this case an UL-Element)
// intervalID is a Number, representing the ID value of the timer
// that is set. After counting is done we use this ID to stop the created
// interval, so it will not count/tick/fire in the background when the
// job is already done.
let intervalID = setInterval(function() {
result++;
// Creating the new LI-Element and append it to the showElement
let newItem = document.createElement('li');
newItem.innerText = String(result);
showElement.appendChild(newItem);
// Check if we reached the secondNumber, if so, lets stop the interval
// by using the intervalID we stored before
if (result >= secondNumber) {
clearInterval(intervalID);
}
}, 100);
}
};
}
type or paste code here