JavaScript help running a basic function on button click - javascript

Just trying to run a simple function when the button "calculate" is pressed. Function won't run at all when inputs are in a form, ultimately I want to be able to modify the other inputs when the calculate button is pressed. Any help at all please!
function calculate() {
alert("called");
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<form name="form">
Price:
<input name="priceCAD" value="0">
<br>
<br>Markup:
<input name="percentage" value="0">
<br>
<br>Fiat:
<input name="fiat" value="0">
<br>
<br>BTC:
<input name="btc" value="0" maxlength="11">
<br>
<br>
<input type="button" onClick="calculate()" name="calculate" value="Caculate">
<input type="button" name="clear" value="Clear" onClick="form.fiat.value=0, form.btc.value=0, form.markup.value=0">
</form>

Button HTML just need it:
<input type="button" onClick="calculate()" name="calculate" value="Caculate" >
And don't forget insert jquery lib in your <head>.

function calculate() {
alert("called");
}
document.getElementsByName("calculate")[0].addEventListener("click", calculate);
<form name="form">
Price:
<input name="priceCAD" value="0">
<br>
<br>Markup:
<input name="percentage" value="0">
<br>
<br>Fiat:
<input name="fiat" value="0">
<br>
<br>BTC:
<input name="btc" value="0" maxlength="11">
<br>
<br>
<input type="button" name="calculate" value="Caculate">
<input type="button" name="clear" value="Clear" onClick="form.fiat.value=0, form.btc.value=0, form.markup.value=0">
</form>

Related

reset two forms by one click JavaScript

I have two forms .. each form has a reser button with the id called "formReset"
no all the form are showing in the same time, one shows after the other one
I used the below code but it only works on the first form, I can o it by doing two click buttons with different id's but is there a way to do it with one click only?
document.getElementById("formReset").addEventListener("click",resetForm);
function resetForm(){
document.getElementById("login").reset();
document.getElementById("cal").reset();
}
<form id="login">
<label>Enter your name : <span id="nameMsg"></span></label><br>
<input type="text" id="name"><br>
<input type="submit" id="submit" value="submit" >
<input type="button" id="formReset" value="reset" ><br>
</form>
<form id="cal">
<input type="number" id="answer" ><br><br>
<input type="button" id="submit2" value="submit2" >
<input type="button" id="formReset" value="reset" >
</form>
try this
document.querySelectorAll(".formReset").forEach(btn=>{
btn.addEventListener("click",resetForm)
});
function resetForm(e){
e.target.parentElement.reset()
}
<form id="login">
<label>Enter your name : <span id="nameMsg"></span></label><br>
<input type="text" id="name"><br>
<input type="submit" id="submit" value="submit" >
<input type="button" class="formReset" value="reset" ><br>
</form>
<form id="cal">
<input type="number" id="answer" ><br><br>
<input type="button" id="submit2" value="submit2" >
<input type="button" class="formReset" value="reset" >
</form>
Attribute id should be unique in a document, use class instead with querySelectorAll() and forEach() like the following way:
document.querySelectorAll(".formReset").forEach(function(reset){
reset.addEventListener("click",resetForm);
});
function resetForm(){
document.getElementById("login").reset();
document.getElementById("cal").reset();
}
<form id="login">
<label>Enter your name : <span id="nameMsg"></span></label><br>
<input type="text" id="name"><br>
<input type="submit" id="submit" value="submit" >
<input type="button" class="formReset" value="reset" ><br>
</form>
<form id="cal">
<input type="number" id="answer" ><br><br>
<input type="button" id="submit2" value="submit2" >
<input type="button" class="formReset" value="reset" >
</form>
easy way using closest.
document.querySelectorAll(".formReset").forEach(btn=>{
btn.addEventListener("click",resetForm)
});
function resetForm(e){
e.target.closest('form').reset()
}
<form id="login">
<label>Enter your name : <span id="nameMsg"></span></label><br>
<input type="text" id="name"><br>
<input type="submit" id="submit" value="submit" >
<input type="button" class="formReset" value="reset" ><br>
</form>
<form id="cal">
<input type="number" id="answer" ><br><br>
<input type="button" id="submit2" value="submit2" >
<input type="button" class="formReset" value="reset" >
</form>
You should add click listeners for each reset button, then reset parent by click
.html
<form id="login">
<label>Enter your name : <span id="nameMsg"></span></label><br>
<input type="text" id="name"><br>
<input type="submit" id="submit" value="submit">
<input type="button" class="formReset" value="reset"><br>
</form>
<form id="cal">
<input type="number" id="answer"><br><br>
<input type="button" id="submit2" value="submit2">
<input type="button" class="formReset" value="reset">
</form>
.js
document.querySelectorAll(".formReset").forEach((e) => {
e.addEventListener("click", () => {
document.querySelectorAll("form").forEach((f) => {
f.reset();
})
});
});

I want the value of my button to appear in a textbox upon clicking the button

I am creating an onscreen keyboard, and want a function which will allow when any of the buttons are pressed, for their values to appear in a text box to the side of the keyboard. The code I have so far is:-
<script type="text/javascript">
function onclick(){
document.getElementById("output").value
=document.getElementById("Q").value;
}
</script>
And the HTML code below:-
<div class ="Row">
<div class="Box2">
<form id="keyboard" name="keyboard">
<div>
<input type="button" onclick='onclick' id="Q" value="Q">
<input type="button" value="W">
<input type="button" value="E">
<input type="button" value="R">
<input type="button" value="T">
<input type="button" value="Y">
<input type="button" value="U">
<input type="button" value="I">
<input type="button" value="O">
<input type="button" value="P">
</div>
<div>
<input type="button" value="A">
<input type="button" value="S">
<input type="button" value="D">
<input type="button" value="F">
<input type="button" value="G">
<input type="button" value="H">
<input type="button" value="J">
<input type="button" value="K">
<input type="button" value="L">
</div>
<div>
<input type="button" value="Z">
<input type="button" value="X">
<input type="button" value="C">
<input type="button" value="V">
<input type="button" value="B">
<input type="button" value="N">
<input type="button" value="M">
</div>
<div>
<input type="button" value="SPACE">
<input type="button" value="ENTER">
</div>
</form>
<input type='text' id='output' />
</div>
</div>
</div>
You have it tagged as jQuery, so here is a more elegant jQuery solution: Throw that code away and use a single delegated jQuery event handler. Start with something like this:
$('[name=keyboard]').on('click', 'input[type=button]', function(){
var value = $(this).attr('value');
$('#output').val($('#output').val() + value);
});
JSFiddle: https://jsfiddle.net/TrueBlueAussie/kaau601u/
Obviously you need to handle the SPACE and ENTER as special cases, but you gave no clues what you are doing next, so leaving that to the reader to finish :)
Notes:
You either need to place this code after the elements it references or put it in a DOM ready handler.
Like this:
$(function(){
$('[name=keyboard]').on('click', 'input[type=button]', function(){
var value = $(this).attr('value');
$('#output').val($('#output').val() + value);
});
});
Or you can use a document attached handler, which is always present:
Like this:
$(document).on('click', 'input[type=button]', function(){
var value = $(this).attr('value');
$('#output').val($('#output').val() + value);
});
//Please try this working example
$('#Q').click(function(){
$('#output').val($(this).val());
console.log($(this).val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="Row">
<div class="Box2">
<form name=keyboard name="keyboard">
<div>
<input type="button" id="Q" value="Q">
<input type="button" value="W">
<input type="button" value="E">
<input type="button" value="R">
<input type="button" value="T">
<input type="button" value="Y">
<input type="button" value="U">
<input type="button" value="I">
<input type="button" value="O">
<input type="button" value="P">
</div>
<div>
<input type="button" value="A">
<input type="button" value="S">
<input type="button" value="D">
<input type="button" value="F">
<input type="button" value="G">
<input type="button" value="H">
<input type="button" value="J">
<input type="button" value="K">
<input type="button" value="L">
</div>
<div>
<input type="button" value="Z">
<input type="button" value="X">
<input type="button" value="C">
<input type="button" value="V">
<input type="button" value="B">
<input type="button" value="N">
<input type="button" value="M">
</div>
<div>
<input type="button" value="SPACE">
<input type="button" value="ENTER">
</div>
</form>
<input type='text' id='output' />
</div>
</div>
I have made a slight change in the output field type with working SPACE and ENTER
jQuery('form[name="keyboard"] input[type="button"]').click(function(){
var inpVal = jQuery(this).val();
if( inpVal == "SPACE" ){
inpVal = ' ';
}else if( inpVal == "ENTER" ){
inpVal = '\n';
}
var val = jQuery('#output').val() + inpVal;
jQuery('#output').val(val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class ="Row">
<div class="Box2">
<form name=keyboard name="keyboard">
<div>
<input type="button" onclick='onclick' id="Q" value="Q">
<input type="button" value="W">
<input type="button" value="E">
<input type="button" value="R">
<input type="button" value="T">
<input type="button" value="Y">
<input type="button" value="U">
<input type="button" value="I">
<input type="button" value="O">
<input type="button" value="P">
</div>
<div>
<input type="button" value="A">
<input type="button" value="S">
<input type="button" value="D">
<input type="button" value="F">
<input type="button" value="G">
<input type="button" value="H">
<input type="button" value="J">
<input type="button" value="K">
<input type="button" value="L">
</div>
<div>
<input type="button" value="Z">
<input type="button" value="X">
<input type="button" value="C">
<input type="button" value="V">
<input type="button" value="B">
<input type="button" value="N">
<input type="button" value="M">
</div>
<div>
<input type="button" value="SPACE" >
<input type="button" value="ENTER">
</div>
</form>
<textarea id="output" cols="40" rows="5"></textarea>
</div>
</div>
</div>
This might help
//this this the script that makes it happen...
$('form[name=keyboard]>div>input[type=button]').click(function(){
$('#output').val($(this).val());
console.log($(this).val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class ="Row">
<div class="Box2">
<form name="keyboard">
<div>
<input type="button" value="Q">
<input type="button" value="W">
<input type="button" value="E">
<input type="button" value="R">
<input type="button" value="T">
<input type="button" value="Y">
<input type="button" value="U">
<input type="button" value="I">
<input type="button" value="O">
<input type="button" value="P">
</div>
<div>
<input type="button" value="A">
<input type="button" value="S">
<input type="button" value="D">
<input type="button" value="F">
<input type="button" value="G">
<input type="button" value="H">
<input type="button" value="J">
<input type="button" value="K">
<input type="button" value="L">
</div>
<div>
<input type="button" value="Z">
<input type="button" value="X">
<input type="button" value="C">
<input type="button" value="V">
<input type="button" value="B">
<input type="button" value="N">
<input type="button" value="M">
</div>
<div>
<input type="button" value="SPACE">
<input type="button" value="ENTER">
</div>
</form>
<input title="keyboard" type='text' id='output' />
</div>
</div>
Using just javaScript and no need for jQuery.
This example including the use of the SPACE and ENTER keys. As a bonus I added a BACKSPACE key.
Note your output text field was changed to text area to allow for the use of the enter key.
Create a single event listener for the form. This can be done using document query selector.
Capture the click event with the query selector.
Note on the <body> tag we add the onload event handler so when the document is served up the event listener is assigned to the <form> node.
Any click inside the <form> will be tested
HTML and javaScript
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<head>
<script type="text/javascript">
var g = {};
function assignListener()
{
/*event listener for keyboard*/
g.keyboard = document.querySelector("#keyboard");
g.keyboard.addEventListener("click", addToTextBox,false);
}
function addToTextBox(e)
{
/*
with query selector the event (e) is passed along
to the function. You can examine the event and get
all kinds of useful stuff from it, like type of event, where it came from, attributes like id, class list etc.
*/
if (e.target.type == 'button')
{
switch (e.target.value)
{
case "ENTER":
document.getElementById('output').value += '\n';
break;
case "SPACE":
document.getElementById('output').value += ' ';
break;
case "BACKSPACE":
document.getElementById('output').value = document.getElementById('output').value.substr(0,document.getElementById('output').value.length-1);
break;
default:
document.getElementById('output').value += e.target.value;
}
}
}
</script>
</head>
<body onload="assignListener();">
<div class ="Row">
<div class="Box2">
<form id=keyboard>
<div>
<input type="button" value="Q">
<input type="button" value="W">
<input type="button" value="E">
<input type="button" value="R">
<input type="button" value="T">
<input type="button" value="Y">
<input type="button" value="U">
<input type="button" value="I">
<input type="button" value="O">
<input type="button" value="P">
</div>
<div>
<input type="button" value="A">
<input type="button" value="S">
<input type="button" value="D">
<input type="button" value="F">
<input type="button" value="G">
<input type="button" value="H">
<input type="button" value="J">
<input type="button" value="K">
<input type="button" value="L">
</div>
<div>
<input type="button" value="Z">
<input type="button" value="X">
<input type="button" value="C">
<input type="button" value="V">
<input type="button" value="B">
<input type="button" value="N">
<input type="button" value="M">
</div>
<div>
<input type="button" value="SPACE">
<input type="button" value="ENTER">
<input type="button" value="BACKSPACE">
</div>
</form>
<!-- <input type='text' id='output' /> -->
<textarea id="output" rows="5" cols="75"></textarea>
</div>
</div>
</body>
</html>

How do i display button value in a text field in JavaScript(not JQuery) [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
i have made a simple calculator and i am unable to print the value of my buttons on click onto the text field. How do i do that? I want to use JavaScript only, not JQuery. When i click on my buttons the values are not displaying on the text field "scr". How can i implement that?
here is my code:
<html>
<head>
<title>Calculator</title>
<style>
</style>
<script type="javascript">
function display0()
{
a=document.all.f1.zero.value;
document.all.getElementById("scr").innerHTML=a;
b=document.all.f1.one.value;
document.all.getElementById('scr').value=b;
c=document.all.f1.two.value;
document.all.getElementById("scr").innerHTML=c;
d=document.all.f1.three.value;
document.all.getElementById("scr").innerHTML=d;
e=document.all.f1.four.value;
document.all.getElementById("scr").innerHTML=e;
f=document.all.f1.five.value;
document.all.getElementById("scr").innerHTML=f;
g=document.all.f1.six.value;
document.all.getElementById("scr").innerHTML=g;
h=document.all.f1.seven.value;
document.all.getElementById("scr").innerHTML=h;
i=document.all.f1.eight.value;
document.all.getElementById("scr").innerHTML=i;
j=document.all.f1.nine.value;
document.all.getElementById("scr").innerHTML=j;
k=document.all.f1.sum.value;
document.all.getElementById("scr").innerHTML=k;
l=document.all.f1.sub;
document.all.getElementById("scr").innerHTML=l;
m=document.all.f1.mul;
document.all.getElementById("scr").innerHTML=m;
n=document.all.f1.div;
document.all.getElementById("scr").innerHTML=n;
o=document.all.f1.clear;
document.all.getElementById("scr").innerHTML=o;
}
</script>
</head>
<body>
<form name="f1" id="f1" method="post">
<div>
<input type="text" id="scr" name="scr" />
</div>
<br/>
<div>
<input type="button" value="7" onclick="display7()" id="seven"name="seven"/>
<input type="button" value="8" onclick="display8()" id="eight"name="eight"/>
<input type="button" value="9" onclick="display9()" id="nine"name="nine"/>
<input type="button" value="/" onclick="display/()" id="div"name="div"/>
<br/>
<input type="button" value="4" onclick="display4()" id="four"name="four"/>
<input type="button" value="5" onclick="display5()" id="five"name="five"/>
<input type="button" value="6" onclick="display6()" id="six"name="six"/>
<input type="button" value="X" onclick="displayX()" id="mul"name="mul"/>
<br/>
<input type="button" value="1" onclick="display()" id="one" name="one" />
<input type="button" value="2" onclick="display2()" id="two"name="two"/>
<input type="button" value="3" onclick="display3()" id="three"name="three"/>
<input type="button" value="-" onclick="display-()" id="sub"name="sub"/>
<br/>
<input type="button" value="CLR" onclick="displayC()"/>
<input type="button" value="0" onclick="display0()" id="zero"name="zero"/>
<input type="button" value="=" onclick="display=()" id="eq"name="eq"/>
<input type="button" value="+" onclick="display+()" id="sum"name="sum"/>
</div>
<br/>
</form>
</body>
</html>
<input type="button" value="test" onClick="document.getElementById('textfield').innerHTML=this.value">
<div id="textfield"></div>
You can try this
HTML
<button id="plus">Plus</button>
<input type="text" id="ih"></input>
Javascript
document.getElementById("ih").value=document.getElementById("plus").innerHTML;
Try this:
var showValue = function(val){
document.getElementById('pressed').value = parseInt(val);
}
<p><input type="text" id="pressed" value="" /></p>
<p>
<button onclick="showValue(1)">1</button>
<button onclick="showValue(2)">2</button>
<button onclick="showValue(3)">3</button>
</p>

Colour change buttons not work

<script language="javascript" type="text/javascript" src"change.js"></script>
<form>
<input type="button" name="Button1" value="RED" onclick="changecolor('red')">
<input type="button" name="Button1" value="BLUE" onclick="changecolor('blue')">
<input type="button" name="Button1" value="Green" onclick="changecolor('green')">
<input type="button" name="Button1" value="Yellow" onclick="changecolor('yellow')">
</form>
This code is saved as change.js
function changecolor(code) {
document.bgColor=code
}
The colour change buttons appear but does not work.
src"change.js" is missing an = sign. Should be src="change.js"

Multiple buttons to input into its own text box on same page,

<html>
<body>
<script>
function moveNumbers(num) {
var txt=document.getElementById("result").value;
txt=txt + num;
document.getElementById("result").value=txt;
}
</script>
Select numbers: <br> <input type="button" value="1" name="no" onclick="moveNumbers(this.value)">
<input type="button" value="2" name="no" onclick="moveNumbers(this.value)">
<input type="button" value="3" name="no" onclick="moveNumbers(this.value)">
<input type="text" id="result" size="20">
<br>
<br>
<br>
<script> function moveNumbers(num) {
var txt=document.getElementById("result").value;
txt=txt + num;
document.getElementById("result").value=txt;
}
</script>
Select numbers: <br> <input type="button" value="a" name="no" onclick="moveNumbers(this.value)">
<input type="button" value="b" name="no" onclick="moveNumbers(this.value)">
<input type="button" value="c" name="no" onclick="moveNumbers(this.value)"> <input type="text" id="result" size="20">
</html>
</body>
Hi all, I have 2 button sets, "1, 2, 3" and "a, b, c". Having trouble trying separate the inputs to there own text boxes on the same page any ideas?. Tried a few things here and there like changing "value" "name" etc. Fairly new at this. Thanks for your help....
You have to do these things
1) Never have same ID's on the same page they should be different.
This attribute defines a unique identifier (ID) which must be unique
in the whole document. Its purpose is to identify the element when
linking (using a fragment identifier), scripting, or styling (with
CSS)
more here.
2) Never have same name for two functions.
3) Your <body> tag should be closed before <html> tag.
<html>
<body>
Select numbers: <br> <input type="button" value="1" name="no" onclick="moveNumbers1(this.value)">
<input type="button" value="2" name="no" onclick="moveNumbers1(this.value)">
<input type="button" value="3" name="no" onclick="moveNumbers1(this.value)">
<input type="text" id="result" size="20">
<br>
<br>
<br>
<script>
function moveNumbers2(num) {
var txt=document.getElementById("result2").value;
txt=txt + num;
document.getElementById("result2").value=txt;
}
function moveNumbers1(num) {
var txt=document.getElementById("result").value;
txt=txt + num;
document.getElementById("result").value=txt;
}
</script>
Select numbers: <br> <input type="button" value="a" name="no" onclick="moveNumbers2(this.value)">
<input type="button" value="b" name="no" onclick="moveNumbers2(this.value)">
<input type="button" value="c" name="no" onclick="moveNumbers2(this.value)"> <input type="text" id="result2" size="20">
</body>
</html>
Dont use same id's in same page for component and function name as well.
The second function will be overwritten on first function (Which means first function will be discarded, it will work).
<html>
<body>
<script>
function moveNumbers(num) {
var txt=document.getElementById("result1").value;
txt=txt + num;
document.getElementById("result1").value=txt;
}
function moveAlpha(num) {
var txt=document.getElementById("result").value;
txt=txt + num;
document.getElementById("result").value=txt;
}
</script>
Select numbers: <br> <input type="button" value="1" name="no" onclick="moveNumbers(this.value)">
<input type="button" value="2" name="no" onclick="moveNumbers(this.value)">
<input type="button" value="3" name="no" onclick="moveNumbers(this.value)">
<input type="text" id="result1" size="20">
<br>
<br>
<br>
Select numbers: <br> <input type="button" value="a" name="no" onclick="moveAlpha(this.value)">
<input type="button" value="b" name="no" onclick="moveAlpha(this.value)">
<input type="button" value="c" name="no" onclick="moveAlpha(this.value)"> <input type="text" id="result" size="20">
</html>
</body>
JJPA has highlighted the problems you have with your HTML and javascript the only thing i'd add is that you can create one function to do both jobs by making them reusable. This is more efficient and reduces the amount of code you need.
Something like this
moveNumbers(num, element){
var txt=document.getElementById(element).value;
txt=txt + num;
document.getElementById(element).value=txt;
}
and then you call the function like this
Select numbers: <br> <input type="button" value="1" name="no" onclick="moveNumbers1(this.value, "result")">
<input type="button" value="2" name="no" onclick="moveNumbers1(this.value, "result")">
<input type="button" value="3" name="no" onclick="moveNumbers1(this.value, "result")">
<input type="text" id="result" size="20">
Use spacs inbetween ur tags like this:
<input type="button" value="a" name="no" onclick="moveNumbers(this.value)">
</input>
<input type="button" value="b" name="no" onclick="moveNumbers(this.value)">
</input>
<input type="button" value="c" name="no" onclick="moveNumbers(this.value)">
Also u can have more buttons, once if any one is clicked its value get posted.

Categories

Resources