Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I'm still new in JavaScript. I am trying to make a program that contains 2 buttons and once a button is clicked, it creates a random number.
The problem is that when I'm trying to compare them, it is not showing which one is bigger. First I thought the problem is that the variables aren't global but it didn't change anything.
Can someone help me find the problem please?
Here is the JavaScript code:
var par1 = document.getElementById("para1");
var par2 = document.getElementById("para2");
var winner = document.getElementById("win");
function button1() {
num1 = Math.floor(Math.random() * 7);
par1.innerHTML = num1;
}
function button2() {
num2 = Math.floor(Math.random() * 7);
par2.innerHTML = num2;
}
if (num1 > num2) {
winner.innerHTML = "the winner is player 1";
} else {
winner.innerHTML = "the winner is player 2";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dicestimulator</title>
<link rel="stylesheet" href="dicestimulator.css">
</head>
<body>
<div class="container">
<div>
<h1>Player1</h1>
<button type="button" name="button1" onclick="button1()" id="but1">roll
dice</button>
<p id="para1">Click the button to see what you get</p>
</div>
<div>
<h1>Player2</h1>
<button type="button" name="button2" id="but2" onclick="button2()">roll
dice</button>
<p id="para2">Click the button to see what you get</p>
</div>
<p id="win">let's see who wins!!!</p>
<script src="dicestimulator.js"></script>
</div>
</body>
</html>
if(num1>num2){
winner.innerHTML="the winner is player 1";
}else{
winner.innerHTML="the winner is player 2";
}
You are not calling the above block no where in your HTML code.
My solution for you make a third button that calls the function getwinner
function getWinner() {
if(par1.val>par2.val){
winner.innerHTML="the winner is player 1";
} else{
winner.innerHTML="the winner is player 2";
}
}
Please note that you cannot call local variables created in functions outside those functions. num1 and num2 cease to exist after the scope of the function that created them.
The section of code:
if(num1>num2){
winner.innerHTML="the winner is player 1";
}else{
winner.innerHTML="the winner is player 2";
}
… is not inside a function.
It runs when the script is initially loaded.
Later on, you call the button1 and button2 functions. These change the values of num1.
You never compare the values again.
If you want to compare them when the button1 and button2 functions run, then the code needs to be called when those functions are.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I have one webpage ,when loading the page it asks some questions if all the questions are correct only then it displays the body part otherwise the question will not allow next question or it should not displays the body part , please help me to fix this issue...
<!DOCTYPE html>
<html>
<head>
<title>Special-Wishes </title>
<script>
let q1=prompt("what is your name...?"); //if the q1 answer is wrong it should not display the body content
if(q1 == "John" || "JOHN" ){
let q2=prompt("what's your nick name...?");
if(q2=="blabla"){
alert("welcome to the page");
}
}
</script>
</head>
<body>
<h1>My body section</h1>
</body>
The reason why it is still asking the next question is due to your if statement logic
if(q1 == "John" || "JOHN" ) should be if(q1 == "John" || q1 == "JOHN" )
An even easier way of doing this would be if(q1.toUpperCase() == "JOHN")
In order to not display the body, you want to either remove it, or make it hidden. This can be done in a else block after your if statement
Remove: document.body.remove();
Hide: document.body.style.display = "none";
Use document.body.style.display = "none" when condition not matched
let q1 = prompt("what is your name...?"); //if the q1 answer is wrong it should not display the body content
if (q1 == "John") {
let q2 = prompt("what's your nick name...?");
if (q2 == "blabla") {
alert("welcome to the page");
} else {
document.body.style.display = "none"
}
} else {
document.body.style.display = "none"
}
<body>
<h1>My body section</h1>
</body>
This question already has answers here:
why the result is NaN?
(4 answers)
Closed 1 year ago.
I've tried a lot of stuff, however I don't know any JavaScript. All of the JavaScript in the code is copied from stack overflow and other sources. The only thing I know how to use is HTML and I'm still very new. (it might also include some CSS which I also don't know at all)
The <!--<button id="bigButton" onclick="bigBottlePress()"><img src="Images/BigBottle.png"></button>--> is a failed thing so ignore it lol.
<html>
<head>
<meta charset="utf-8">
<title>Bottle Clicker</title>
</head>
<body>
<img src="Images/BigBottle.png" height="500">
<!--<button id="bigButton" onclick="bigBottlePress()"><img src="Images/BigBottle.png"></button>-->
<br>
<br>
<input type="text" id="hydrationLevelDisplay" placeholder="Hydration Level: " disabled style= text-align:center>
<script>
var hydrationLevel = 0
function bigBottlePress() {
var hydrationLevel = hydrationLevel + 1
document.getElementById("hydrationLevelDisplay").value = "Hydration Level: " + hydrationLevel;
document.title = "Hydration Level: " + hydrationLevel;
}
</script>
</body>
</html>
You have already declared hydrationLevel outside function, so don't need to redclare it. Just change,
var hydrationLevel = hydrationLevel + 1
to
hydrationLevel = hydrationLevel + 1
create a button -> id:btn
create a result div or p or h1 -> id:hydrationLevel
select the button, add event listener
document.getElementById('btn').addEventListener('click', incrementLevel)
let hydrationCount = 0;
function incrementLevel() {
hydrationCount += 1;
document.getElementById('hydrationLevel').textContent = hydrationCount;
}
I'd encourage you to use event listeners this way. not inline that's why I provided this solution.
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 2 years ago.
i think that the code 100% normal but why i got that Error????:
Uncaught TypeError: Cannot set property 'innerHTML' of null||
the code is:
<!DoCTYPE html>
<html lang="eng">
<head>
<meta charset ="utf-8">
<meta name="" content="">
<title></title>
<script>
function myAgeInDays() {
"use strict";
var myAge = 15;
return myAge * 365;
}
var daysCalc = myAgeInDays();
document.getElementById("test").innerHTML =
"Your Age In Days = "+ daysCalc+ " Day";
</script>
</head>
<body>
<button onclick="myinfo();">OK</button>
<h1 id="test">Ok</h1>
</body>
</html>
A few things can be done to improve this question:
Give some context, not the error the console prints out
Especially in the case of a very common js error. An example for your case could be "In form submission cannot select html element / selector is null in onclick function".
State some of the things you have tried
This will help you grow as a developer (the old teaching someone to fish story)
Some more tips here: https://stackoverflow.com/help/how-to-ask
In your case, the code you posted does not work (myinfo is not defined) and your code is in the <head> which is defined before the <p> is created. add it at the end of your body to ensure that all the elements are created. If you wanted to make a function handle the button click that contained the logic in your , you would write something like:
<body>
<button id="calcDays">OK</button>
<h1 id="test">Ok</h1>
<script type="text/javascript">
document.getElementById('calcDays')
.addEventListener('click', function () {
function myAgeInDays(days) {
return days * 365;
}
document.getElementById("test").textContent =
`Your Age In Days = ${myAgeInDays(15)} Days`;
});
</script>
</body>
This question already has an answer here:
Why doesn't my equality comparison using = (a single equals) work correctly? [duplicate]
(1 answer)
Closed 5 years ago.
I'm trying to run this simple javascript code but doesn't get desired output. This code showing "You are pass" instead of "You are fail". Please tell where im wrong.
<html>
<head>
<title>
If else if and else use
</title>
</head>
<body>
<script>
function ifelseifelse() {
var marks=32;
if (marks>33){
alert("You are Pass");
}
else if(marks=33)
{
alert("You are pass");
}
else{
alert("You are fail");
}
}
</script>
<button type = "button" onclick="ifelseifelse()" >If else-if if</button>
</body>
</html>
You are using
else if(marks=33)
instead of
else if(marks==33)
You are assigning 33 to marks instead of comparing it
Use == in the else-if to compare your marks with 33
it's getting hung up at the second statement.
if(marks=33) should be if(marks === 33)
I'm fairly new to programming and have been learning HTML, CSS, and Javascript. I'm working on a project involving the upcoming election where a users presses a button (using <form> in html) to vote for a candidate. What I'm having an issue doing is relaying the results. Using either javascript or html, how would I be able to track the amount of times each button is pressed and relay the information later in the webpage that says the number of votes for each candidate and the total number of votes.
EDIT I've messed around with the code a little and here is my current javascript file, I set the program to tell you who you voted for in an alert() message, but the name of the candidate isn't showing up properly...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>Election</title>
</head>
<body>
<center>
<h1>2016 Presidential Election</h1>
<h2>Vote Here</h2>
<form>
<button type="button" onclick="clicksubmit()">Click to vote for Trump</button>
<button type="button" onclick="clicksubmit()">Click to vote for Hillary</button>
</form>
<h3>Results:</h3>
</center>
<script src="election.js" type="text/javascript"></script>
</body>
</html>
JS:
function clicksubmit(){
var votehillary = document.getElementById('hillary');
alert("You voted for "+ votehillary);
var votetrump = document.getElementById('trump');
alert("You voted for "+ votetrump);
}
To count your button clicks you can declare a variable for each candidate and increment them on each click. To do so, you need to change your button elements and your result header:
<h3 id="results">
total: 0
trump: 0
hillary: 0
</h3>
<button type="button" id="trump-button">Click to vote for Trump</button>
<button type="button" id="hillary-button">Click to vote for Hillary</button>
In your election.js file you can fetch each button and apply a onClick event to them, incrementing a variable declared when the page is loaded:
var trump = 0;
var hillary = 0;
function refreshResults () {
var results = document.getElementById('results');
results.innerHTML = 'total: ' + (trump + hillary);
results.innerHTML += '<br />trump: ' + trump;
results.innerHTML += '<br />hillary: ' + hillary;
}
document.getElementById('trump-button').addEventListener('click', function () {
trump++;
refreshResults();
});
document.getElementById('hillary-button').addEventListener('click', function () {
hillary++;
refreshResults();
});