lundi 12 octobre 2020

Checked options activated only after button click (Javascript)

I have an input box, and a check box with two options.

If you only use the input box of a value, you will get a result in return, when you press "calculate" However, if you also check one or both of the check boxes, you are going to get a different result.

So, one result if no checkbox is checked, one result if one checkbox is checked and finally a third result when both checkboxes are checked.

I have managed to do this, but right now, the result activates as soon as the check boxes are checked, because the function runs on "checked". The idea is to have the result displayed only after you have clicked "calculate".

I've tried something like this for the function (adding result.clicked ==true), but it doesnt work:

function activatemananeeded() {
  var checkBox = document.getElementById("myCheck");
  var checkBox2 = document.getElementById("myCheck2");
  var buttonclick = document.getElementById("result");
  if (checkBox.checked == true && checkBox2.checked == true && result.clicked == true){
    mananeeded4();
  } else if (checkBox.checked == true && checkBox2.checked == false && result.clicked == true) {
     mananeeded2();
  } else if (checkBox.checked == false && checkBox2.checked == true && result.clicked == true) {
      mananeeded3 ();
  } else {
    mananeeded()
}
}

and the html

<label for="myCheck" style="width:200px;margin: 25px;font-size: 13px;font-weight:bold">Double EXP/Skill:</label>
  <input type="checkbox" id="myCheck" onclick="activatemananeeded()">

<br>
<label for="myCheck2" style="width:200px;margin: 25px;font-size: 13px;font-weight:bold">Private Training Dummy:</label>
  <input type="checkbox" id="myCheck2" onclick="activatemananeeded()">
</label>
<br>
<br>
<button style="margin: -95px" onclick="mananeeded()">Calculate!</button>

<p style="font-size: 13px;font-weight:bold;margin-left: 25px;margin-top: 20px;"  id="result"></p>



Aucun commentaire:

Enregistrer un commentaire