javascript - If statement when checkbox is checked? - Stack Overflow|江阴雨辰互联

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!

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>

Share Improve this question edited Nov 2, 2016 at 14:34 asked Nov 2, 2016 at 14:16 zone 53 51 gold badge3 silver badges5 bronze badges

1 Seems like that code should be in an event handler. As it is, it'll be executed only when the page loads. – Pointy Commented Nov 2, 2016 at 14:17
Yep, exactly what @pointy said. Where is this script included in your document? – Jacob Krall Commented Nov 2, 2016 at 14:18
You can use events like click with this.target to see if the input is checked. – Olaf Erlandsen Commented Nov 2, 2016 at 14:19
its sounds like a document.ready issue – Ceylan Mumun Kocabaş Commented Nov 2, 2016 at 14:19

Add a ment |

2 Answers 2

Sorted by: Reset to default 1

You can use the event like onclick.

Example with pure javascript using click event:

var isCheckedWithGlobalVariable = false;
document.getElementById('myInput').onclick = function() {
    if (this.checked == true) {
        // the element is checked
        isCheckedWithGlobalVariable = true;
    }
};

Maybe you need use this on multiple elements, so you can use querySelectorAll with for. Example:

var isCheckedWithGlobalVariable = false;
var elements = document.querySelectorAll('input[type=checkbox]');
for (var i = 0; i < elements.lenght; i++) {
    elements[i].onclick = function() {
        if (this.checked == true) {
            // checked
            isCheckedWithGlobalVariable = true;
        }
    };
}

On jQuery you can use :checked selector with click event:

var isCheckedWithGlobalVariable = false;
$('#myInput').click(function() {
    if ($(this).is(':checked')) {
        // checked
        isCheckedWithGlobalVariable = true;
    }
})

var isCheckedWithGlobalVariable = false;
$('#myInput:checked').click(function() {
   // only if it is checked
   isCheckedWithGlobalVariable = true;
})

Or with multiple elements:

var isCheckedWithGlobalVariable = false;
$('input').click(function() {
   if ($(this).is(':checked')) {
       // this element is checked
       isCheckedWithGlobalVariable = true;
   }
})

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/ebwxcvg9/

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744365449a4570680.html

javascript - If statement when checkbox is checked? - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - If statement when checkbox is checked? - Stack Overflow

2 Answers 2

相关推荐