How to fix js code on if then statement with number Input

How to fix js code on if then statement with number Input - javascript

I wanted the user to input a number and if the number is a multiple of 3 or 5, I want a word/paragraph that says, "You are a witch"
created a function but I cannot seem to make it work
var x;
function pop() {
for (x = 1; x <= 100; x++)
if (x % 3 == 0) {
document.getElementById('onClick').innerHTML = 'You are a Warrior';
} else if (x % 5 == 0) {
document.getElementById('onClick').innerHTML = 'You are a wizard';
} else if (x % 3 == 0 && x % 5 == 0) {
document.getElementById('onClick').innerHTML = 'You are a Sage';
} else {
document.getElementById('onClick').innerHTML = 'invalid';
}
}
<input type="number" id="x">
<br>
<br>
<center><button onclick="pop()">Click Me</button> </center>
<br>
<br>
<p id="onClick"></p>

You never read the user input. You have a loop where there should not be one. You need to change the order of the comparisons.
function pop(){
var x = document.getElementById("x").value;
if (x % 3 == 0 && x % 5 == 0) {
document.getElementById('onClick').innerHTML = "You are a Sage";
}
else if (x % 3 == 0 ) {
document.getElementById('onClick').innerHTML = "You are a Warrior";
}
else if (x % 5 == 0){
document.getElementById('onClick').innerHTML = "You are a wizard";
}
else {
document.getElementById('onClick').innerHTML = "invalid";
}
}
<input type="number" id="x">
<br>
<br>
<center><button onclick="pop()">Click Me</button> </center>
<br>
<br>
<p id="onClick"></p>

Related

Cannot get text to appear in text area when I submit a button [duplicate]

This question already has answers here:
Why does generating a random number outside of a loop, causes it to be always the same?
(2 answers)
Why is the content not showing after refresh
(2 answers)
Can we have code after location.reload(true)?
(3 answers)
Closed 4 months ago.
I am trying to build a random question generator for a card game that my 7 year old son and I like to play. Basically, what I’m trying to get is so that every time you click on the button, a new question will generate in the text area above. I have it so that the random questions are appearing in the console.log, they just aren’t appearing in the text area.
Here is the code that I have so far:
var generateBtn = document.querySelector("#generate");
let randomNumber = Math.floor(Math.random() * 8);
let worldQuestion = '';
if (randomNumber == 0) {
worldQuestion = 'Highest Point';
} else if (randomNumber == 1) {
worldQuestion = 'Lowest Point';
} else if (randomNumber == 2) {
worldQuestion = 'Highest Population';
} else if (randomNumber == 3) {
worldQuestion = 'Lowest Population';
} else if (randomNumber == 4) {
worldQuestion = 'Most Neighboring Countries';
} else if (randomNumber == 5) {
worldQuestion = 'Least Neighboring Countries';
} else if (randomNumber == 6) {
worldQuestion = 'Biggest Area';
} else if (randomNumber == 7) {
worldQuestion = 'Smallest Area';
}
function writeQuestion() {
var passwordText = document.querySelector("#password");
passwordText.value = worldQuestion;
}
generateBtn.addEventListener("click", writeQuestion);
<div class="wrapper">
<div class="card">
<div class="card-header">
<h2>Generate a World Question</h2>
</div>
<div class="card-body">
<textarea readonly id="password" aria-label="Generated World Question"></textarea>
</div>
<div class="card-footer">
<button id="generate" class="btn" onClick="window.location.reload()" type="button">Generate World Question</button>
</div>
</div>
</div>

If you want worldQuestion to be calculated every time the button is pressed, you need to do the calculation inside the event listener. Like this:
var generateBtn = document.querySelector("#generate");
function writeQuestion() {
let randomNumber = Math.floor(Math.random() * 8);
let worldQuestion = '';
if (randomNumber == 0) {
worldQuestion = 'Highest Point';
} else if (randomNumber == 1) {
worldQuestion = 'Lowest Point';
} else if (randomNumber == 2) {
worldQuestion = 'Highest Population';
} else if (randomNumber == 3) {
worldQuestion = 'Lowest Population';
} else if (randomNumber == 4) {
worldQuestion = 'Most Neighboring Countries';
} else if (randomNumber == 5) {
worldQuestion = 'Least Neighboring Countries';
} else if (randomNumber == 6) {
worldQuestion = 'Biggest Area';
} else if (randomNumber == 7) {
worldQuestion = 'Smallest Area';
}
var passwordText = document.querySelector("#password");
passwordText.value = worldQuestion;
}
generateBtn.addEventListener("click", writeQuestion);
<textarea id="password"></textarea>
<br>
<button id="generate">Generate</button>
Also, you do not need to use a large if-statement here. You store all the possible questions in an array, then choose an index at random. Like this:
var generateBtn = document.querySelector("#generate");
function writeQuestion() {
let randomNumber = Math.floor(Math.random() * 8);
questions = ['Highest Point', 'Lowest Point', 'Highest Population',
'Lowest Population', 'Most Neighboring Countries',
'Least Neighboring Countries', 'Biggest Area', 'Smallest Area']
var passwordText = document.querySelector("#password");
passwordText.value = questions[randomNumber];
}
generateBtn.addEventListener("click", writeQuestion);
<textarea id="password"></textarea>
<br>
<button id="generate">Generate</button>

auto correct the values in the text box on blur

I have one HTML page where I am having 3 text or number boxes in it. And I have set a number range for each text boxes like for "Minimum Length" it is 6 - 255 and the Lowercase and uppercase will have 0 as minimum and value of the "Minimum Length" as the maximum.
Now my question is suppose I have set "Minimum Length", Lowercase, Uppercase to 60, the values are getting saved in the config file and able to read the same values from the same. then if I change the "Minimum Length" value to 9 then the values of Lowercase and Uppercase which are set to 60 should also get changed to 9 coz 9 is lesser than 60 and max value of Lowercase and uppercase is set to the value of "Minimum Length". For the I have written blurfunc1() so the if I change the value of "Minimum Length" and click on commit then the values of Lowercase and uppercase also should get changed. But that is not working as expected. Am I doing anything wrong in blurfunc1() ??
var isValidMinLen=true;
var isValidLC=true;
var isValidUC=true;
function checkLength_minlen(elem) {
if (elem.value == ''){
document.getElementById("msg1").innerHTML = 'Min 6 and Max 256';
document.getElementById("msg1").style.color = 'black';
document.getElementById("btn").disabled = true;
isValidMinLen=false;
}
else if (elem.value < 6) {
document.getElementById("msg1").style.color = 'red';
document.getElementById("msg1").innerHTML="Min value is 6";
document.getElementById("btn").disabled = true;
isValidMinLen=false;
}
else if (elem.value > 256) {
document.getElementById("msg1").style.color = 'red';
document.getElementById("msg1").innerHTML="Max value is 256";
document.getElementById("btn").disabled = true;
isValidMinLen=false;
}
else {
document.getElementById("msg1").style.color = 'green';
document.getElementById("msg1").innerHTML="Min 6 and Max 256";
isValidMinLen=true;
checkButtonValidation();
}
}
function checkLength_lc(elem) {
if (elem.value == ''){
document.getElementById("msg4").innerHTML = "Min 0 and Max "+document.getElementById("Minlen_text").value;
document.getElementById("msg4").style.color = 'black';
document.getElementById("btn").disabled = true;
isValidUC=false;
}
else if (elem.value < 0) {
document.getElementById("msg4").style.color = 'red';
document.getElementById("msg4").innerHTML="Min value is 0";
document.getElementById("btn").disabled = true;
isValidUC=false;
}
else if (elem.value > +document.getElementById("Minlen_text").value) {
document.getElementById("msg4").style.color = 'red';
document.getElementById("msg4").innerHTML="Max value is "+document.getElementById("Minlen_text").value;
document.getElementById("btn").disabled = true;
isValidUC=false;
}
else {
document.getElementById("msg4").style.color = 'green';
document.getElementById("msg4").innerHTML="Min 0 and Max "+document.getElementById("Minlen_text").value;
isValidUC=true;
checkButtonValidation();
}
}
function checkLength_uc(elem) {
if (elem.value == ''){
document.getElementById("msg5").innerHTML = "Min 0 and Max "+document.getElementById("Minlen_text").value;
document.getElementById("msg5").style.color = 'black';
document.getElementById("btn").disabled = true;
isValidUC=false;
}
else if (elem.value < 0) {
document.getElementById("msg5").style.color = 'red';
document.getElementById("msg5").innerHTML="Min value is 0";
document.getElementById("btn").disabled = true;
isValidUC=false;
}
else if (elem.value > +document.getElementById("Minlen_text").value) {
document.getElementById("msg5").style.color = 'red';
document.getElementById("msg5").innerHTML="Max value is "+document.getElementById("Minlen_text").value;
document.getElementById("btn").disabled = true;
isValidUC=false;
}
else {
document.getElementById("msg5").style.color = 'green';
document.getElementById("msg5").innerHTML="Min 0 and Max "+document.getElementById("Minlen_text").value;
isValidUC=true;
checkButtonValidation();
}
}
function checkButtonValidation(){
if(isValidMinLen==false || isValidLC==false || isValidUC==false){
document.getElementById("btn").disabled = true;
}else{
document.getElementById("btn").disabled = false;
}
}
function focusfunc1() {
document.getElementById("msg1").innerHTML = 'Min 6 and Max 255';
}
function blurfunc1() {
document.getElementById("msg1").innerHTML = ' ';
if (document.getElementById("Minlen_text").value < 6) {
document.getElementById("Minlen_text").value = 6;
document.getElementById("btn").disabled = false;
}
else if(document.getElementById("Minlen_text").value > 255) {
document.getElementById("Minlen_text").value = 255;
document.getElementById("btn").disabled = false;
}
else if(document.getElementById("Minlen_text").value == ' ') {
document.getElementById("btn").disabled = true;
}
else if(document.getElementById("LC_text").value && document.getElementById("UC_text").value > +document.getElementById("Minlen_text").value) {
document.getElementById("LC_text").value = +document.getElementById("Minlen_text").value;
document.getElementById("UC_text").value = +document.getElementById("Minlen_text").value;
}
}
function focusfunc4() {
document.getElementById("msg4").innerHTML = 'Min 0 and Max '+document.getElementById("Minlen_text").value;
}
function blurfunc4() {
document.getElementById("msg4").innerHTML = ' ';
if (document.getElementById("LC_text").value < 0) {
document.getElementById("LC_text").value = 0;
document.getElementById("btn").disabled = false;
}
else if(document.getElementById("LC_text").value > +document.getElementById("Minlen_text").value) {
document.getElementById("LC_text").value = +document.getElementById("Minlen_text").value;
document.getElementById("btn").disabled = false;
}
}
function focusfunc5() {
document.getElementById("msg5").innerHTML = 'Min 0 and Max '+document.getElementById("Minlen_text").value;
}
function blurfunc5() {
document.getElementById("msg5").innerHTML = ' ';
if (document.getElementById("UC_text").value < 0) {
document.getElementById("UC_text").value = 0;
document.getElementById("btn").disabled = false;
}
else if(document.getElementById("UC_text").value > +document.getElementById("Minlen_text").value) {
document.getElementById("UC_text").value = +document.getElementById("Minlen_text").value;
document.getElementById("btn").disabled = false;
}
}
<div id="Minlen">
<label class="heading">Minimum Length</label>
<input type="number" id="Minlen_text" value="60" onkeyup="checkLength_minlen(this)" onfocus="focusfunc1()" onblur="blurfunc1()" pattern="[0-9]" onkeypress="return !(event.charCode == 46)" step="1" /> <span class="heading1" id="msg1"></span>
</div>
<div id="lowercase">
<label class="heading">Lowercase</label>
<input type="number" id="LC_text" onkeyup="checkLength_lc(this)" onfocus="focusfunc4()" onblur="blurfunc4()" pattern="[0-9]" onkeypress="return !(event.charCode == 46)" step="1" /> <span class="heading1" id="msg4"></span>
</div>
<div id="uppercase">
<label class="heading">Uppercase</label>
<input type="number" id="UC_text" onkeyup="checkLength_uc(this)" onfocus="focusfunc5()" onblur="blurfunc5()" pattern="[0-9]" onkeypress="return !(event.charCode == 46)" step="1" /> <span class="heading1" id="msg5"></span>
</div>
<input type=submit class="commit" id="btn" value=Commit onclick="commit()">

JavaScript function not being called from button

I am trying to code the infamous FizzBuzz program in multiple languages and I am stumped on JavaScript. I am trying to call the function from a button but it doesn't work, and even when I try to call the function normally the same happens. I've tried multiple different methods of outputting and it made no difference so hopefully someone can show me what im doing wrong. Here's the code:
<!DOCTYPE html>
<html>
<body>
<div class="center">
<h1>This is FizzBuzz</h1>
<button onclick="fizzBuzz()">Run FizzBuzz</button>
<p id="hi">Hi there</p>
</div>
<style>
.center {
text-align: center;
font-family:Arial;
}
</style>
<script> //JavaScript
var idd = document.getElementById("hi");
function fizzBuzz(){
idd.innerHTML = "hi";
for (x = 0; x = 15; x++) {
idd.innerHTML = x;
if (x % 3 == 0 && x % 5 == 0){
idd.innerHTML = "FizzBuzz";
} else if((x % 3)= 0){
idd.innerHTML = "Fizz";
} else if((x % 5) = 0){
idd.innerHTML = "Buzz";
} else {
idd.innerHTML = x;
}
}
}
fizzBuzz();
</script>
</body>
</html>

x = 15 will never evaluate to false, meaning the loop will go on forever. Try changing it to x < 15.
function fizzBuzz(){
idd.innerHTML = "hi";
for (x = 0; x < 15; x++) {
idd.innerHTML = x;
if (x % 3 == 0 && x % 5 == 0){
idd.innerHTML = "FizzBuzz";
} else if((x % 3) == 0){
idd.innerHTML = "Fizz";
} else if((x % 5) == 0){
idd.innerHTML = "Buzz";
} else {
idd.innerHTML = x;
}
}
}
You will also need to use == instead of = for comparisons for it to work, as in (x % 3) == 0.

<!DOCTYPE html>
<html>
<body>
<div class="center">
<h1>This is FizzBuzz</h1>
<button onclick="fizzBuzz()">Run FizzBuzz</button>
<p id="hi">Hi there</p>
</div>
<style>
.center {
text-align: center;
font-family:Arial;
}
</style>
<script> //JavaScript
var idd = document.getElementById("hi");
function fizzBuzz(){
idd.innerHTML = "hi";
for (x = 0; x < 15; x++) {
idd.innerHTML = x;
if (x % 3 == 0 && x % 5 == 0){
idd.innerHTML = "FizzBuzz";
} else if((x % 3)== 0){<!--here '=='-->
idd.innerHTML = "Fizz";
} else if((x % 5) == 0){<!--here '=='-->
idd.innerHTML = "Buzz";
} else {
idd.innerHTML = x;
}
}
}
fizzBuzz();
</script>
</body>
</html>

If x equals something then do not run function

I am new to JavaScript and HTML. I have this line of code in my JavaScript file:
if (q1 == '' && q2 == '' && q3 == '' && q4 == '' && q5 == '') {alert("You must enter a question");thisform.q1.focus();return false;}
Basically, q1 q2 and so on are textboxes and if they are left blank an alert pops up and says You must enter a question. In my HTML file I have this line of code
<script type="text/javascript">
function add() {
var num = document.getElementById("n1").value;
if(num == '') num = 0;
document.getElementById("n1").value = parseInt(num ,10) + 1;
var num = document.getElementById("n2").value;
if(num == '') num = 0;
document.getElementById("n2").value = parseInt(num ,10) + 1;
var num = document.getElementById("n3").value;
if(num == '') num = 0;
document.getElementById("n3").value = parseInt(num ,10) + 1;
var num = document.getElementById("n4").value;
if(num == '') num = 0;
document.getElementById("n4").value = parseInt(num ,10) + 1;
var num = document.getElementById("n5").value;
if(num == '') num = 0;
document.getElementById("n5").value = parseInt(num ,10) + 1;
}
</script>
Then Later:
<INPUT onclick="addQ(myForm);add();" value="Add Question" id="question add" type=button>
Is there any way that I can make the add() function not execute if my alert pops up?

You can try
<INPUT onclick="if(!addQ(myForm)) {return false;} add();" value="Add Question" id="question add" type=button>
then add a return true; to the end of function addQ().
function addQ(myForm){
....
if (q1 == '' && q2 == '' && q3 == '' && q4 == '' && q5 == '') {alert("You must enter a question");thisform.q1.focus();return false;}
......
.....
return true;
}
or
<INPUT onclick="if(addQ(myForm) === false) {return false;} add();" value="Add Question" id="question add" type=button>

Stop function when it says 'GREEN'

I am making the button activate the function to change the color to a random color, but when it's green, i want the button to stop changing the color.
<html>
<head>
<script type="text/javascript">
function roll1() {
rand = Math.ceil(Math.random() * 6);
die = document.getElementById("die1");
if (rand >= 1 && rand <= 3) {
die.innerHTML = "<p>'GREEN'<\/p>";
} else if (rand == 4 || rand == 5) {
die.innerHTML = "<p>'GREEN'<\/p>";
} else if (rand == 6) {
die.innerHTML = "<p>'RED'<\/p>"
}
}
</script>
</head>
<body>
<button onclick="roll1()">Roll Dice</button>
<table>
<tr>
<td style="width:55px; height:55px;">
<p id="die1">'YELLOW'</p></td>
</tr>
</table>
</body>
</html>
i also don't want the button to disappear, because it still needs to do something else that is not in this code.

var stop_flag = false;
function roll1() {
if (stop_flag)
return false;
rand = Math.ceil(Math.random() * 6);
die = document.getElementById("die1");
if (rand >= 1 && rand <= 3) {
stop_flag = true;
die.innerHTML = "<p>'GREEN'<\/p>";
} else if (rand == 4 || rand == 5) {
die.innerHTML = "<p>'GREEN'<\/p>";
} else if (rand == 6) {
die.innerHTML = "<p>'RED'<\/p>"
}
}

You could add the attribute disabled, so the button is no longer clickable.

Develop Reference

JavaScript is the programming language of the Web.

How to fix js code on if then statement with number Input - javascript

Related

Cannot get text to appear in text area when I submit a button [duplicate]

auto correct the values in the text box on blur

JavaScript function not being called from button

If x equals something then do not run function

Stop function when it says 'GREEN'

Categories

Resources