JavaScript – Problems with Reset button on calculator - javascript

I have a simple calculator and I want two text fields to reset when the reset button is clicked, but for some reason it's not working. I've referenced other Stack Overflow inquiries, but some use jQuery. Is there a way to do this without jQuery? Anyways, here's the JSFiddle: http://jsfiddle.net/jsdmLr7b/
<script>
var a, b, result;
function setValues() {
a = Number(document.getElementById('leftInput').value);
b = Number(document.getElementById('rightInput').value);
}
function sum() {
setValues();
result = a + b;
document.getElementById('inputTotal').innerHTML = result;
}
function reset() {
document.getElementByID('inputLeft').innerHTML.value = "";
document.getElementByID('inputRight').innerHTML.value = "";
}
</script>
<div>
<input id="leftInput" type="text" />
<input id="rightInput" type="text" />
<input type="button" onClick="sum()" value="sum" />
<input type="button" onClick="reset()" value="reset" />
<p>Total: <a id="inputTotal"></a>
</p>
</div>

Try this:
<script>
var a, b, result;
function setValues() {
a = Number(document.getElementById('leftInput').value);
b = Number(document.getElementById('rightInput').value);
}
function sum() {
setValues();
result = a + b;
document.getElementById('inputTotal').innerHTML = result;
}
function reset() {
document.getElementById("leftInput").value = "";
document.getElementById("rightInput").value = "";
}
</script>
<div>
<input id="leftInput" type="text" />
<input id="rightInput" type="text" />
<input type="button" onClick="sum()" value="sum" />
<input type="button" onClick="reset()" value="reset" />
<p>Total: <a id="inputTotal"></a>
</p>
</div>
Your problem was that you were calling getElementByID on the document. The proper way to call this is getElementById with a lowercase "d" in "Id."
Also, you were referencing the wrong id values. They are leftInput and rightInput, not inputLeft and inputRight. It can be easy to overlook wording and case sensitivity after looking at code for hours!
I switched the reset function to use .value = ""; because it makes more sense in this case and should be used for input/form operations, while innerHTML is used for other elements (div, span, td, etc.)
You can also clear your total by adding this to the reset() function:
document.getElementById("inputTotal").innerHTML = "";
In this case you want to use innerHTML because your value is not inside an input/form operation. Here's the updated JSFiddle.

I Found A Very Simple Solution Just Wrap Your All Input in FORM Tag and Your Reset button will work Fine

Related

showing the result of multiply two input value in a div called result

I just want to show the result in this div ,i tried to use nodeValue instead value and call the finalCalc fun in js file but it show nothing when i click on the button.
var billValue=document.getElementById("dollars").value,
peopleValue=document.getElementById("people").value,
theResult=document.getElementById("result"),
calculateButton=document.getElementById("calculateButton");
function calculateTip(x,y){
var reso=x*y;
theResult.innerHTML=reso;
}
function finalCalc() {
calculateTip(billValue,peopleValue);
}
<form>
<label>how much was your bill?</label>
<label for ="dollars">$</label>
<input value ="0" type="text" id="dollars" placeholder="Bill Amount ">
<br>
<label for="people">How many people are sharing the bill?</label>
<input value ="0" type="text" id="people">
<button type="button" id="calculateButton" onclick()="finalCalc()">CALCULATE</button>
<div id="result"></div>
</form>
onClick is written as onClick="" instead of onclick()="", reworked your code a little, hope this helps.
var billValue = document.getElementById("dollars").value,
peopleValue = document.getElementById("people").value,
theResult = document.getElementById("result"),
calculateButton = document.getElementById("calculateButton");
function calculateTip(x, y) {
return x * y;
}
function finalCalc() {
theResult.innerHTML = calculateTip(billValue, peopleValue);
}
<button type="button" id="calculateButton" onClick="finalCalc()">CALCULATE</button>

Why does this line work without .value?

function check() {
var input;
input = document.getElementById("check_btwn");
if (!input.checkValidity()) {
document.getElementById("check_message").innerHTML = input.validationMessage;
} else {
document.getElementById("check_message").innerHTML = "OK";
}
}
<input type="number" name="" id="check_btwn" min="100" max="300">
<button type="button" onclick="check()">check</button>
<p id="check_message"></p>
Why .value is not used in input=document.getElementById("check_btwn");
but it’s still working?
With innerHtml what you do is that you add any html within an id, for Ex.
<span id="Test"></span>
<script>
document.getElementById("Test").innerHtml = <h2>This is a test</h2>
</script>
As you can se the span tag will have inside it a new tag that will be an h2, with some text in it, now with value there is a difference, because what value does is that it changes the value attr of a tag, for Ex:
<input type="text" id="Test2" value=""/>
<script>
document.getElementById("Test2").value = "i am the new value"
</script>
you can also find a good documentation in
Javascript innerHtml
javascript value

Change an HTML <p> tag value with JavaScript

I have an HTML form that allows a user to type in the name of a faction and submit it with a button:
<form method="get">
</br><button type="submit" onclick="createFaction()">create faction</button>
<input placeholder="name" id="factionName" name="factionName"></input>
</form>
The reason it is GET at the moment is purely for testing.
I then have a JavaScript function that changes the name of this:
<p id="test1"></p>
to whatever the users input was. The JavaScript code is
function createFaction() {
var name = document.getElementById('factionName'),
factionName = input.value;
document.getElementById('test1').innerHTML = name;
}
However, it doesn't work. Why?
First change type='button'. Instead use submit, type="submit". It will submit the page and you will not see changes done. The change is here:
<button type="button" onclick="createFaction()">create faction</button>
Then change name.value in JavaScript to get the value from the name object:
factionName = name.value;
function createFaction() {
var name = document.getElementById('factionName'),
factionName = name.value;
document.getElementById('test1').innerHTML = factionName;
}
<form method="get">
</br><button type="button" onclick="createFaction()">create faction</button>
<input placeholder="name" id="factionName" name="factionName">
</form>
<p id="test1"></p>
Another way to do this is,
function createFaction(faction) {
document.getElementById('test1').innerHTML = faction;
}
<input onchange="createFaction(this.value)" onkeyup="createFaction(this.value)" placeholder="type something ..." id="factionName" name="factionName">
<p id="test1"></p>
You don't even need a form for this, and also the function can be made simpler - just do it this way:
function createFaction() {
var name = document.getElementById('factionName').value;
document.getElementById('test1').innerHTML = name;
}
<button onclick="createFaction()">create faction</button>
<input placeholder="name" id="factionName" name="factionName"></input>
<p id="test1"></p>
onclick will fire with button type = submit and the function will look like:
function createFaction() {
var name = document.getElementById('factionName').value;
document.getElementById('test1').innerHTML = name;
}
You don't need to wrap this into a form since you are not trying to send data to a server, so you can just skip it.
Also I would use jQuery for this:
<button id="factionBtn">create faction</button>
<input placeholder="name" id="factionName" name="factionName">
<p id="test1"></p>
And:
$(document).ready(function createFaction() {
var $paragraph = $('#test1');
var $factionName = $('#factionName');
$('#factionBtn').click(function(e) {
console.log($factionName.val());
$paragraph.text($factionName.val());
});
});

Disappearing HTML - Function

I am trying to make a small calculator-thingy for my website. I want to be able to write a number in a text-input, then get the double of that number back. I tried this way at first:
<form name="form">
<input type="text"/>
</form>
<script type="text/javascript">
function calc() {
var x = document.forms[0].elements[0].value;
document.write(x*2);
}
</script>
<input type="button" onClick="calc()" value="Calculate here"/>
This is working fine, but when calling the function ( calc() ) with the button, all HTML is removed. The only thing appearing is the double of the number (variable x) you wrote. I have read that the "function" make all other HTML disappear.
Is it possible to make the page stay the same, but at the same time showing the calculated number (x*2)? Can I reach the variable x without using a function?
Is it possible to "control" where and how the calculated number (x*2) is going to appear, within the JavaScript or within the HTML?
I am new to this coding art, was hoping to find a relatively easy way to solve this.
Thanks!
The best way is probably to add a div outside the form which is intended to reflect the calculated value. Then you can update calc to find this div and replace its contents with the calculated value.
<script>
function calc() {
var x = document.forms[0].elements[0].value;
var result = x * 2;
document.getElementById("result").innerHTML = result;
}
</script>
<form name="form">
<input type="text"/>
</form>
<input type="button" onclick="calc()" value="Calculate here"/>
<div id="result"></div>
Adding to your original code and the accepted answer.
Make sure that the value you retrieve is an integer(or a float).This way you will prevent the user from getting weird results.
You can do it like this:
<script>
function calc() {
var x = parseFloat(document.forms[0].elements[0].value);// or parseInt(document.forms[0].elements[0].value)
var result = x * 2;
document.getElementById("result").innerHTML = result;
}
</script>
<form name="form">
<input type="text"/>
</form>
<input type="button" onclick="calc()" value="Calculate here"/>
<div id="result"></div>

Javascript max and min not working

I am trying to create a page that lets the user enter three numbers, and have the max and min values printed below from the input. I've used both the Math.max/min functions and also tried an if statement but When I click submit nothing shows up. Some insight would be greatly appreciated, thanks!
function max() {
var x = document.getElementById("num1").value;
var y = document.getElementById("num2").value;
var z = document.getElementById("num3").value;
var maximum = Math.max(parseInt(x), parseInt(y), parseInt(z));
document.getElementById("max").innerHTML= maximum;
}
function min() {
var x = parseInt(document.getElementById("num1").value);
var y = parseInt(document.getElementById("num2").value);
var z = parseInt(document.getElementById("num3").value);
document.getElementById("min").innerHTML = Math.min(x,y,z);
}
And here is my html
<p>Enter First Number:</p>
<input type="text" name = "number1" id="num1"><br>
<p>Enter Second Number</p>
<input type="text" name = "number2" id="num2"><br>
<p>Enter third number</p>
<input type="text" name = "number3" id="num3"><br>
<input type="submit" value="Submit" onclick="max(); min(); "><br />
<p>Max =</p><p id ="max"></p><br />
<p>Min =</p><p id ="min"></p><br />
replace <input type="submit"/> to <button type="submit" value="" onclick="minmax();">Submit</button>
and add JS function:
function minmax() {
min();
max();
}
Your problem seems related to how you are attaching your event.
It works OK when I use:
document.querySelector( '[type="submit"]' ).addEventListener( 'click', function() {
max();
min();
}, false );
http://jsfiddle.net/yemxrmqq/
You just need to change the tag related to the button, instead of:
<input type="submit" value="Submit" onclick="max(); min(); "><br />
just put:
<button type="submit" value="Submit" onclick="max(); min()">Click</button><br />
None of the answers here tell you why your code didn't work.
Identifiers in inline listeners are first resolved as properties of the element on which they are placed. Input elements have a default max attribute, so within an inline listener, the identifier max will reference the input's max property. Hence in any document:
<input onclick="console.log(max)">
shows '' (i.e. empty string).
So you can either change the names of the functions to something more meaningful, or change the context from which they are called so that the identifiers aren't resolved on the element, and the OP code works. e.g.
<input type="submit" value="Submit" onclick="callBoth()">
and
function callBoth() {
max();
min();
}
Incidentally, an input type submit outside a form is just a button, so you should use:
<input type="button" ...>

Categories