CODEWITHSUNDEEP
javascripthtml
EV-O
EV-O

Reputation: 21

javascript variable reset button

I am trying to add a button which will change the value of "box1" or "value!" to = 0. I've spent hours trying different approaches, can someone please point me in the right direction.

  <script type="text/javascript">
  
  	function calculate() {
		var value1 = document.getElementById('box1').value;	
		var value2 = document.getElementById('box2').value;
		var result = document.getElementById('result');	
		var myResult = value1 * value2;
		result.value = myResult;
	}
	function reset() {
	 value1 = 0;
	 }
  
  </script>
  
  <div><input id="box1" type="text" /> Value 1</div>
  <div><input id="box2" type="text"  />Value 2</div>
  <div><input id="result" />Answer</div>
  <div><button onclick="calculate()" value="text here" style="width: 139px">Calculate</button></div>
  <div><button onclick="reset()" value="text here5" style="width: 139px">reset</button></div>

Upvotes: 2

Views: 2842

Answers (3)

MaxZoom
MaxZoom

Reputation: 7753

It works fine for me ;)

function calculate() {
  var value1 = document.getElementById('box1').value;
  var value2 = document.getElementById('box2').value;
  var result = document.getElementById('result');
  var myResult = value1 * value2;
  result.value = myResult;
}

function reset() {
  document.getElementById('box1').value = 0;
  document.getElementById('box2').value = 0;
  document.getElementById('result').value = 0;
}
<div>
      <input id="box1" type="text" />Value 1</div>
    <div>
      <input id="box2" type="text" />Value 2</div>
    <div>
      <input id="result" type="text" />Answer</div>
    <div>
      <button onclick="calculate()" value="text here" style="width: 139px">Calculate</button>
    </div>
    <div>
      <button onclick="reset()" value="text here5" style="width: 139px">reset</button>
    </div>

Upvotes: 0

DRAB
DRAB

Reputation: 445

Your variable value1 does not exist in the scope of your reset method. It is defined in calculate.

You should refer to the box you wish to reset in your reset function:

document.getElementById('box1').value = 0;

Upvotes: 0

uraimo
uraimo

Reputation: 19821

If you want to reset all the fields, following your style:

function reset() {
   document.getElementById('box1').value=0; 
   document.getElementById('box2').value=0;
   document.getElementById('result').value=0;   
}

Or, if you want to reuse those variables declaring them as global:

<script type="text/javascript">

var el1;
var el2;
var res;

function calculate() {
    el1 = document.getElementById('box1');  
    el2 = document.getElementById('box2');
    res = document.getElementById('result');    
    var myResult = el1.value * el2.value;
    res.value = myResult;
}
function reset() {
    el1.value = 0;
    el2.value = 0;
    res.value = 0;
}

</script>

Upvotes: 1

Related Questions