zone 53 zone 53 - 1 month ago 4
Javascript Question

If statement when checkbox is checked?

A little question here, I'm trying to execute a huge calculation that will determine something randomly within a value range. I want the user to determine this range himself, and let him choose wether he wants to add a maximum value or a minimum value. Basically, everything works for now, but I'm trying to put an "if" statement at the beginning to check if the checkboxes are checked or not in order to prompt the proper questions. The problem is, the way I'm writing it right now makes it impossible to read the program: it simply does nothing. The error message displayed is:



Uncaught TypeError: Cannot read property 'checked' of null(…).



I tried a few things, and when I set the values myself, it works, so the problem is really the "if" statement. Here are my global vars and the part that doesnt work:

var maxdesiredvalue, mindesiredvalue;

if (document.getElementById("min").checked == false) {
mindesiredvalue = 0.00
}
else {
mindesiredvalue = window.prompt("Valeur minimale désirée:");
mindesiredvalue = parseInt(mindesiredvalue)}

if (document.getElementById("max").checked == false) {
maxdesiredvalue = 9999999.99
}
else {
maxdesiredvalue = window.prompt("Valeur maximale désirée:");
maxdesiredvalue = parseInt(maxdesiredvalue)}

function RandWeap() {
/*Huge function here determining a value and repeating until it
is between mindesiredvalue and maxdesiredvalue*/
}


The checkboxes are written like this:

<body>
<form>
<i> Press F5 to clear or to get 1 random weapon </i> <br> <br>
Min price: <input type="checkbox" id="min"> <br>
Max price: <input type="checkbox" id="max"> <br> <br>
<button type="button" onclick="RandWeap()">Add a random weapon to list</button>
</form>
</body>


Any idea of how to get it working?

Thank you!

EDIT


Alright, so basically if we can give an exemple of something similar but really simplified,it would look like this:

<html>
<meta charset="utf-8">
<script type="text/javascript" language="JavaScript">

var desiredResult;

desiredResult = (parseInt(window.prompt("Valeur désirée")))

function dice(){

var result, missed;

result = (Math.floor(Math.random() * 6) + 1)

if (desiredResult == result) {document.body.innerHTML += result}
else if (desiredResult != result) {dice()}

}

window.onload = dice

</script>
<body>
Choose value: <input type="checkbox" id="choose"> <br> <br>
<button type="button" onclick="dice()">Roll dice!</button>
</body>
</html>


So we prompt a desired value, and then repeat the function until it is our desired value. Now, what should be the edits to this code in order to have it prompt the desired value ONLY if a checkbox is checke?. So, onload, of course, it would not be checked, so it would only enter the random value. Then, when we click a button, it repeats this step, but if we checked the box just before, it will prompt the desired value. I'm not sure if it's clear... but basically that's what I want to know. If anyone has any idea of the code I need to add, would be very nice!

Answer

I'm assuming your script is inline either in your head section or at the top of the body? If so, the problem is that your checkboxes don't exist at the time the script runs.

Presumably you want to prompt when the user clicks the button, in which case you should do the following:

a) Wrap your main "get min/max" code in a function, and b) Call that function in your button click.

Like so:

var maxdesiredvalue, mindesiredvalue;

function getMinMax() {
  if (document.getElementById("min").checked == false) {
    mindesiredvalue = 0.00
  } else {
    mindesiredvalue = window.prompt("Valeur minimale désirée:");
    mindesiredvalue = parseInt(mindesiredvalue)
  }

  if (document.getElementById("max").checked == false) {
    maxdesiredvalue = 9999999.99
  } else {
    maxdesiredvalue = window.prompt("Valeur maximale désirée:");
    maxdesiredvalue = parseInt(maxdesiredvalue)
  }
}

function RandWeap() {
  getMinMax();
  alert("Min: " + mindesiredvalue + " Max: " + maxdesiredvalue);
  //Huge function here determining a value and repeating until it 
  //is between mindesiredvalue and maxdesiredvalue
}

There are more elegant solutions, but this is the essence of it.

JS Fiddle here: https://jsfiddle.net/ebwxcvg9/