I made a simple HTML with JS inside, and its about add 1 to variable and keep running until user gets 1 by rng(random number generator). Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function clicked(){
var num = Math.floor((Math.random() * 100) + 1);
var click = 0;
click = click+1;
if(num == 1){
document.getElementById("print").innerHTML="Congratz! You did it in "+click+" times!";
document.getElementById("press").disabled = true;
}
else{
document.getElementById("print").innerHTML="Not the right number! You 've pressed "+click+" times!";
}
}
</script>
</head>
<h1>TEST YOUR LUCK!</h1>
<body>
<input type="button" value="Press Me!" id="press" onclick="clicked()">
<div id="print"></div>
</body>
</html>
At this code, click = click+1 don't work and click is stuck at 1. What should I do?
The reason your click stuck to 1 is whenever function called you are declaring
click = 0, so it is initialized every time you press the button. So just declare var click outside of function clicked() and see the magic.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var click = 0;
function clicked(){
var num = Math.floor((Math.random() * 100) + 1);
click = click+1;
if(num == 1){
document.getElementById("print").innerHTML="Congratz! You did it in "+click+" times!";
document.getElementById("press").disabled = true;
}
else{
document.getElementById("print").innerHTML="Not the right number! You 've pressed "+click+" times!";
}
}
</script>
</head>
<h1>TEST YOUR LUCK!</h1>
<body>
<input type="button" value="Press Me!" id="press" onclick="clicked()">
<div id="print"></div>
</body>
</html>
Related
When i use the function to check if number is positive or negative it works fine but when i try to do it again nothing happens i have to refresh the whole page to make it work again. Any help is welcome!
const userNum = document.querySelector(".user-input").value;
const checkBtn = document.querySelector(".check-input");
const result = document.querySelector(".result");
function checkNum() {
if (userNum > 0) {
result.innerHTML = "Positive!!"
}
else if (userNum < 0) {
result.innerHTML = "Negativeee!!"
}
else if (userNum < 0) {
result.innerHTML = "Number is NULL"
}
else {
result.innerHTML = "Enter a Number!!"
}
return false;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="intro">
<h1>A Program to Check if number is <br></h1>
<h2>Positive, Negative or Null</h2>
</div>
<div class="check-number-type">
<input type="text" class="user-input">
<button onclick="checkNum()" class="check-input">Check</button>
</div>
<div class="show-result">
<p class="result"></p>
</div>
</div>
</body>
<script src="/script.js"></script>
</html>
The reason why you say you have to "reload" the page everytime is because your code that extracts the input value was placed outside of your checkNum function that determines if it's positive or negative.
You only retrieve the input once, when the script starts, instead of getting a fresh copy everytime you enter the checkNum function.
Just move this:
const userNum = document.querySelector(".user-input").value;
Inside the checkNum() function.
I'm Tring to get a user to chose with 2 buttons, which site will be presented in iframe tag.
Option1.html does work as default, but Option1.html & Option2.html do not work with user button.
When Clicking the buttons, I Get the default browser error "Can’t reach this page".
Please Take into account, that I a beginner with HTML and JS.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Module choose</title>
</head>
<body>
<p>Click to choose Module</p>
<button onclick="myFunction1()">Option1</button>
<script>
function myFunction1() {
document.getElementById("myframe").src = "Option1.htm";
}
</script>
<button onclick="myFunction2()">Option2</button>
<script>
function myFunction2() {
document.getElementById("myframe").src = "Option2.htm";
}
</script>
<br><br>
<iframe id="myframe" src="Option1.htm" width="1600" height="1600"></iframe>
</body>
</html>
Ok first make a folder and put this code in that and make another html document named same as given in your code...
Or see this
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Module choose</title>
</head>
<body>
<p>Click to choose Module</p>
<button onclick="myFunction1()">Option1</button>
<script>
function myFunction1() {
document.getElementById("myframe").src = "index.html";
}
</script>
<button onclick="myFunction2()">Option2</button>
<script>
function myFunction2() {
document.getElementById("myframe").src = "index2.html";
}
</script>
<br><br>
<iframe id="myframe" src="Option1.htm" width="1600" height="1600"></iframe>
</body>
</html>
This will be the main page...
And this will be inbdex.html. When user clicks option1 then this will be shown...
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Stopwatch</title>
</head>
<body>
<div>Seconds: <span id="time">0</span></div>
<input type="button" id="startTimer" value="Start Timer" onclick="start();"><br/>
<input type="button" id="stopTimer" value="Stop Timer" onclick="stop();"><br/>
<script>
var timeElapsed = 0;
var timerID = -1;
function tick() {
timeElapsed++
document.getElementById("time").innerHTML = timeElapsed;
}
function start() {
if(timerID == -1){
timerID = setInterval(tick, 1000);
}
}
function stop() {
if(timerID != -1){
clearInterval(timerID)
timerID = -1
}
}
function reset() {
stop();
timeElapsed = -1;
tick()
}
</script>
</body>
</html>
And the below thing will be index2.html. So when user clicks option2 then this will be shown!
<html>
this is other page
</html>
i'm trying to get value of input field, so depending on if the input value is 0 or 1, the value of the input is one or two, and it's supposed to show up in console.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>demo</title>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<p>Input 0 or 1.</p>
<input id="ok" type="text">
<button onclick="functionn()"></button>
<script>
var x = document.getElementById("ok").value;
function functionn() {
if (x == 0) {
ok = "one";
console.log(ok); }
else if (x == 1) {
ok = "two";
console.log(ok);
} else {
alert("please input 0 or 1");
}
}
</script>
</body>
</html
You are so close!
The problem that you have is the "x" variable, it holds the value on the input after the page was loaded, which is and empty string.
You need to put that variable inside the function, so every time you click the button you will "go" and check the value of the input and then store it inside the "x" variable.
Hope this help! =]
try it:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>demo</title>
<meta charset="utf-8" />
<style></style>
</head>
<body>
<p>Input 0 or 1.</p>
<input id="ok" type="text" />
<button onclick="functionn()"></button>
<script>
var x = document.getElementById("ok");
function functionn() {
if (x.value === "0") {
ok = "one";
console.log(ok);
} else if (x.value === "1") {
ok = "two";
console.log(ok);
} else {
alert("please input 0 or 1");
}
}
</script>
</body>
</html>
I made a simple "spacebar simulator" game with HTML and JavaScript. Every time the user presses spacebar an image is replaced with another one, and when the key is released it is reset to the original image.
I would like to add a counter to the page, which counts the number of times the user has pressed spacebar. The source code is below:
var myRealUrl = "./assets/spacebar.png";
$("body").on("keydown", function (e) {
if(e.which == 32){
$("#spacebar").attr("src", "./assets/spacebar_pressed.png")
}
});
$("body").keyup(function (e) {
$("#spacebar").attr("src", myRealUrl)
});
var button = document.getElementById('counter'),
count = 0;
button.onclick = function() {
count += 1;
button.innerHTML = "Click me: " + count;
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
<link rel="stylesheet" href="css/stylesheet.css">
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="container">
<div class="title">
<h1>Spacebar Simulator 2018</h1>
<span id="counter"><p></p></span>
</div>
<img src="assets/spacebar.png" id="spacebar">
<p>Pressed</p><p id="counter">0</p><p> times.</p>
<footer>
<p>© 2018</p>
</footer>
</div>
<script src="js/spacebar.js"></script>
</body>
</html>
So set up a page level variable and increment it in the keydown event handler.
Your attempt at the "button" click code didn't work because the p element that needed to be clicked had no content inside of it, so it wasn't rendering on the screen and therefore there was nothing to click on.
Also, you can't have more than one element with the same id and it's invalid to put a p inside of a span.
var counter = 0; // Variable to hold the count
var myRealUrl = "./assets/spacebar.png";
var count = document.getElementById('counter');
$("body").on("keydown", function (e) {
if(e.which == 32){
counter++; // Increment the counter
$("#spacebar").attr("src", "./assets/spacebar_pressed.png");
count.textContent = counter; // Log the count
}
});
$("body").keyup(function (e) {
$("#spacebar").attr("src", myRealUrl)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
<link rel="stylesheet" href="css/stylesheet.css">
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="container">
<div class="title">
<h1>Spacebar Simulator 2018</h1>
</div>
<img src="assets/spacebar.png" id="spacebar">
<p>Pressed <span id="counter">0</span> times.</p>
<footer>
<p>© 2018</p>
</footer>
</div>
<script src="js/spacebar.js"></script>
</body>
</html>
Can anyone help :
The scenario is when the user1 click the button it will increment
Example : user1 clicks 5 times and then the user2 when it clicks the next number will be 6. and then when the user1 click again it will be 7
i think it works with ajax and save to db, anyone can help me how to do it. Im a begginer in ajax and database
Here is the code i just know:
<html>
<body>
<button type="button" onClick="counter()">Next</button>
<p>Number: <a id="counter">0</a></p>
</body>
</html>
<script type="text/javascript">
var counter= 0;
function counter() {
counter += 1;
document.getElementById("counter").innerHTML = counter;
}
</script>
Please use session storage to store the incremental values.
like store the values using sessionStorage.setItem("userclicks",variablevalue);
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
function load()
{
if(localStorage.getItem("counter")!=null)
{
counter = Number(localStorage.getItem("counter"));
document.getElementById("counterValue").innerHTML = counter;
}
}
var counter= 0;
function counterFn() {
counter = Number(localStorage.getItem("counter"));
console.log(counter);
counter += 1;
localStorage.setItem("counter",counter);
document.getElementById("counterValue").innerHTML = counter;
}
</script>
</head>
<body onload="load();">
<button type="button" onclick="counterFn()">Next</button>
<p>Number:<a id="counterValue">0</a></p>
</body>
</html>
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
function load()
{
if(localStorage.getItem("counter")!=null)
{
counter = Number(localStorage.getItem("counter"));
document.getElementById("counterValue").innerHTML = counter;
}
}
var counter= 0;
function counterFn() {
counter = Number(localStorage.getItem("counter"));
console.log(counter);
counter += 1;
localStorage.setItem("counter",counter);
document.getElementById("counterValue").innerHTML = counter;
}
</script>
</head>
<body onload="load();">
<button type="button" onclick="counterFn()">Next</button>
<p>Number:<a id="counterValue">0</a></p>
</body>
</html>