I have been trying to make a simple html page that returns a different animation (stored in different HTML documents, although this can be changed I thought it was best for cleanliness) based on the return of variable "response". I have been having issues with this simple script to return my desired results, and I havent found many relevant results online (inb4 LMGTFY). I know that the response variable is being created as desired as it was printing the number chosen, athough now it seems intermittent as to when it likes to print.
Does anyone have advice on an effective way to script this?
Cheers,
Matt
(current HTML is as follows, I havent implemented any CSS or external scripts otherwise)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fielder's Choice Spinner</title>
<meta name="description" content="Instore spinner for FC">
<meta name="author" content="Matthew Davis">
<link href="style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--ill just leave this here-->
<script language="JavaScript">
var response = (function getRandomIntInclusive(min, max) {
min = Math.ceil(1);
max = Math.floor(1000);
return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive
})();
document.write(response)
if (response > 900) {
window.location.replace("win.html")
}
if (response < 900){
window.location.replace("lose.html")
}
</script>
</head>
<body>
</body>
</html>
Use the hashtag. It used to be a secret character for programmers before Twitter adopted it.
example: if you redirect to "win.html#756", then win.html can read that number, with window.location.hash
To remove the hash sign itself you can use .substr(1)
index.html (I changed it a little, take away what you want)
<script language="JavaScript">
window.onload = function() {
var response = function getRandomIntInclusive(min, max) {
min = Math.ceil(1);
max = Math.floor(1000);
return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive
};
var myresponse = response();
if (myresponse > 900) {
window.location.replace("win.html#" + myresponse);
}
if (myresponse < 900) {
window.location.replace("lose.html#" + myresponse);
}
}
</script>
win.html (dito for lose.html, except the message)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fielder's Choice Spinner - WIN</title>
<link href="style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="JavaScript">
window.onload = function() {
var myresponse = window.location.hash.substr(1);
document.getElementById('data').innerHTML = myresponse;
}
</script>
<style>#data { color: red; font-size: 18px;}</style>
</head>
<body>
<div id="main">YOU WON --- Your score is: <span id="data"></span></div>
</body>
</html>
Related
I am learning Javascript right now. I have a small issue that I can't figure out how to solve it. I would like to clear content of my html page after my function displayed "Hi hi" in web page.
<html>
<body onload="alertFunc()">
<script>
function alertFunc() {
var statement = "Hi hi"
for (let i = 0; i < statement.length; i++) {
let c = statement.charAt(i);
setTimeout(function(){
document.write(c);
},i * 1000);
}
}
</script>
</body>
</html>
try this to clear content of your site after 1 second
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learning </title>
</head>
<body>
<script>
document.write('hi hi');
function alertFunc() {
setTimeout(function(){
document.write(' ');
}, 1000);
}
alertFunc();
</script>
</body>
</html>
if you want to change content with time again and again then you have to use setInterval
I'm a beginner for javascript and HTML. and now working on my assignment from an online course.
I'm currently making 3 minutes timer using HTML, CSS, and javascript.
I borrowed javascript code form online and changing some codes to understand what's written in javascript.
I have two questions...
one is when I put addEventListener('click', startTimer(), false); it just doesn't seem to work properly, and more like it's already triggering function in the javascript file. so I want to know why it's happening.
second is that innerHTML is not working. I tried to put document.getElementsByClassName('start').innerHTML = "START"; in javascript file, but I don't see 'START' on the web page. I don't actually need to insert innerHTML for START button but I tried to change other HTML part using innerHTML it's not working so I wonder why that's happening.
does somebody know how to make them work?
thank you!
document.getElementById('timer').innerHTML = "03" + ":" + "00";
document.getElementsByClassName('start').innerHTML = "START";
var start = document.getElementsByClassName('start');
start.addEventListener('click', startTimer(), false);
var stop = document.getElementsByClassName('stop');
stop.removeEventListener('click', startTimer(), false);
var reset = document.getElementsByClassName('reset');
function startTimer() {
var presentTime = document.getElementById('timer').innerHTML;
var timeArray = presentTime.split(/[:]+/);
var m = timeArray[0];
var s = checkSecond((timeArray[1] - 1));
if(s==59){m=m-1}
//if(m<0){alert('timer completed')}
document.getElementById('timer').innerHTML =
m + ":" + s;
console.log(m)
setTimeout(startTimer, 1000);
}
function checkSecond(sec) {
if (sec < 10 && sec >= 0) {sec = "0" + sec}; // add zero in front of numbers < 10
if (sec < 0) {sec = "59"};
return sec;
}
<!DOCTYPE html>
<html class="no-js" lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title id="countdown-timer">3 Minutes Timer</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="timer-title">
<p>3 Minutes Timer</p>
</div>
<div class="timer-box">
<div class="timer-outer-display">
<div class="timer-display">
<div>
<p id="timer" ></p>
</div>
</div>
</div>
<div class="button">
<button class="start"></button>
<button class="stop">STOP</button>
<button class="reset">RESET</button>
</div>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
You forgot to indicate the element number of the collection...
var start = document.getElementsByClassName('start')[0];
NB: Square brackets.
So if you notice I have created a link in the preview below. What I'm looking for is if someone clicks on the link. I want to replace the text for a 60 seconds timer, and once the 60 seconds are finished, the text and link should reappear, and the same process continues.
Can someone help?
Request code again
You can use javascript setInterval and then clearInterval for this.
Your code while using jQuery should look like this: (change the value of timer_output_initial to time in number of seconds you want)
var display_timer_interval;
var timer_output_initial = 5
var timer_output = timer_output_initial;
var initial_text = "";
$("#timer_link").on("click",function(){
var clicked_element = $(this);
initial_text = clicked_element.html();
display_timer_interval = setInterval(function(){
display_time(clicked_element);
}, 1000);
});
function display_time(element){
timer_output = timer_output-1;
if(timer_output === 0) {
clearInterval(display_timer_interval);
timer_output = timer_output_initial;
element.html(initial_text);
}else{
$(element).html(timer_output);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
Request code again
</body>
</html>
I have a problem with the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<title>The Ultimate Quiz Challenge</title>
</head>
<body>
<div class="container">
<h1>The Ultimate Quiz Challenge</h1>
<script>
document.write("<h3> " + "Welcome to the ultimate quizz challenge" +"</h3>");
document.write("<p> "+"Hi I will ask you five questions and then rank you" + "</p>");
var question1 ="<p>What is the capital of England</p>";
var firstanswer ="London";
var question2 = "<p>How many sides are there to a square</p>";
var secondanswer = 4;
var noofquestions = 2;
var count = 1
/*var temp = eval('question' +1); */
/*document.write(temp);*/
/* main loop asking questions */
while (count <= 2) {
var temp = eval('question' + count);
document.write(temp);
var answer = prompt("Please type your answer ");
count++;
}
</script>
</div>
</body>
</html>
When I load the file into a browser such a chrome or safari it does not execute as hoped.
In short the document.write commands do not come out onto the screen until the prompt window as asked for two inputs. I thought the first thing to be seen would be the Ultimate Quiz Challenge followed by the commands in the open script tag down to the bottom ?
You should use the onload event on your body, so your script executes once the html page is rendered. It should work with :
<body onload="displayText()">
displayText() being a function you define in your script :
var displayText = function () {
while (count <= 2) {
var temp = eval('question' + count);
document.write(temp);
var answer = prompt("Please type your answer ");
count++;
}
};
or something similar.
I have a piece of code that counts from 0 to a specified number with a specified delay.
The problem is that it adds by 1 and I want it to add by 0.01
How to do it? the code is as follows:
<!DOCTYPE HTML>
<html>
<head>
<style>body{font:11px verdana;color:#555;}</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var max = 20;// set with php
$(incCounter);
function incCounter() {
var currCount = parseInt($('.counter').html());
$('.counter').text(currCount+1);
if (currCount+1 != max) {
setTimeout(incCounter,50);
}
}
</script>
</head>
<body>
<div class="counter">0</div>
</body>
</html>
I haven't tested this, but try...
function incCounter() {
var currCount = parseFloat($('.counter').html());
currCount += .01;
$('.counter').text( currCount.toFixed(2) );
if (currCount < max)
setTimeout(incCounter,50);
}
JS Fiddle to play with.