i have the following form
<html>
<head>
<style type="text/css">
.on {
border:1px outset;
color:#369;
background:#efefef;
}
.off {
border:1px outset;
color:#369;
background:#f9d543;
}
</style>
<script language="javascript">
function togglestyle(el){
if(el.className == "on") {
el.className="off";
} else {
el.className="on";
}
}
</script>
</head>
<body>
<form method="POST" action="#" >
<input type="button" id="btn" value="1" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="button" id="btn" value="2" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="button" id="btn" value="3" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="button" id="btn" value="4" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="button" id="btn" value="5" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="button" id="btn" value="6" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>
Here i want to use toggle action, i dont want to use checkbox here, I want to pass the toggled value from this form. Is there any way to do this?
in the same page i already have some checkbox with with check action enabled, here i want to pass max 3 toggled values, i have tried using radio box but that will work only for one, not with 3. how to do this.
Related
I am a complete beginer, and I am learning frontend web development currently. And as a first project I was creating a simple calculator. I followed steps from a youtuber as I was learning from him. But the problem occuring is that whenever I am clicking buttons it is not displaying the number in the display bar and showing me error "Uncaught ReferenceError : form is not defined". I currently don't have any knowledeg regarding this pls help me out. I am just curious that what is my mistake.
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<form class="form">
<div class="display">
<input name="displayResult" type="text" placeholder="0" />
</div>
<div class="buttons">
<div class="row">
<input class="btn" type="button" name="b7" value="7" onclick="func(b7.value)">
<input class="btn" type="button" name="b8" value="8" onclick="func(b8.value)">
<input class="btn" type="button" name="b9" value="9" onclick="func(b9.value)">
<input class="btn" type="button" name="plus" value="+" onclick="func(plus.value)">
</div>
<div class="row">
<input class="btn" type="button" name="b4" value="4" onclick="func(b4.value)">
<input class="btn" type="button" name="b5" value="5" onclick="func(b5.value)">
<input class="btn" type="button" name="b6" value="6" onclick="func(b6.value)">
<input class="btn" type="button" name="minus" value="-" onclick="func(minus.value)">
</div>
<div class="row">
<input class="btn" type="button" name="b1" value="1" onclick="func(b1.value)">
<input class="btn" type="button" name="b2" value="2" onclick="func(b2.value)">
<input class="btn" type="button" name="b3" value="3" onclick="func(b3.value)">
<input class="btn" type="button" name="mul" value="*" onclick="func(mul.value)">
</div>
<div class="row">
<input class="btn" type="button" name="b0" value="0" onclick="func(b0.value)">
<input class="btn" type="button" name="bd" value="." onclick="func(bd.value)">
<input class="btn" type="button" name="divv" value="/" onclick="func(divv.value)">
<input class="equal" type="button" value="=" onclick="displayResult.value=eval(displayResult.value)">
</div>
</div>
</form>
</div>
<script>
function func(result) {
form.displayResult.value = form.displayResult.value + result;
}
</script>
</body>
in the console that error is being showed for this specific line,
form.displayResult.value = form.displayResult.value + result;
The problem is you have not defined your form variable. In javascript all undeclared variables have a value of undefined.
To fix this, inside your func, just add var form = document.getElementByClassName('form')[0].
Reference : https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
form means nothing to javascript. Therefore, it is not defined. You need to fetch the form in the DOM first:
const form = document.querySelector("form.form");
// would be safer if you gave the form an id but doesn't matter in this case
// then you can change the value
form.displayValue.value += result;
a quick look at document.querySelector
Add let form = document.getElementById('form') in func():
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<form class="form" id="form" )>
<div class="display">
<input name="displayResult" type="text" placeholder="0" />
</div>
<div class="buttons">
<div class="row">
<input class="btn" type="button" name="b7" value="7" onclick="func(b7.value)">
<input class="btn" type="button" name="b8" value="8" onclick="func(b8.value)">
<input class="btn" type="button" name="b9" value="9" onclick="func(b9.value)">
<input class="btn" type="button" name="plus" value="+" onclick="func(plus.value)">
</div>
<div class="row">
<input class="btn" type="button" name="b4" value="4" onclick="func(b4.value)">
<input class="btn" type="button" name="b5" value="5" onclick="func(b5.value)">
<input class="btn" type="button" name="b6" value="6" onclick="func(b6.value)">
<input class="btn" type="button" name="minus" value="-" onclick="func(minus.value)">
</div>
<div class="row">
<input class="btn" type="button" name="b1" value="1" onclick="func(b1.value)">
<input class="btn" type="button" name="b2" value="2" onclick="func(b2.value)">
<input class="btn" type="button" name="b3" value="3" onclick="func(b3.value)">
<input class="btn" type="button" name="mul" value="*" onclick="func(mul.value)">
</div>
<div class="row">
<input class="btn" type="button" name="b0" value="0" onclick="func(b0.value)">
<input class="btn" type="button" name="bd" value="." onclick="func(bd.value)">
<input class="btn" type="button" name="divv" value="/" onclick="func(divv.value)">
<input class="equal" type="button" value="=" onclick="displayResult.value=eval(displayResult.value)">
</div>
</div>
</form>
</div>
<script>
function func(result) {
let form = document.getElementById('form')
form.displayResult.value = form.displayResult.value + result;
}
</script>
</body>
form isn't defined here. What you need to do is get the input field as an object and change it's text.
function func(result) {
let input = document.getElementById("input-field");
input.value += result;
}
Before this, add an id to your input tag: " "input-field".
It doesn't work because your <form> doesn't have an id or name attribute.
If you want to access your elements without querying the DOM like the given code, you should give your element an id or name attribute, then it becomes a property of window (a global variable) and you can directly access it from JavaScript.
function func(result) {
console.log(form);
form.displayResult.value = Number(form.displayResult.value) + Number(result);
}
<div class="container">
<form id="form" class="form">
<div class="display">
<input name="displayResult" type="text" placeholder="0" value="0" />
</div>
<div class="buttons">
<div class="row">
<input class="btn" type="button" name="b7" value="7" onclick="func(b7.value)">
<input class="btn" type="button" name="b8" value="8" onclick="func(b8.value)">
<input class="btn" type="button" name="b9" value="9" onclick="func(b9.value)">
<input class="btn" type="button" name="plus" value="+" onclick="func(plus.value)">
</div>
<div class="row">
<input class="btn" type="button" name="b4" value="4" onclick="func(b4.value)">
<input class="btn" type="button" name="b5" value="5" onclick="func(b5.value)">
<input class="btn" type="button" name="b6" value="6" onclick="func(b6.value)">
<input class="btn" type="button" name="minus" value="-" onclick="func(minus.value)">
</div>
<div class="row">
<input class="btn" type="button" name="b1" value="1" onclick="func(b1.value)">
<input class="btn" type="button" name="b2" value="2" onclick="func(b2.value)">
<input class="btn" type="button" name="b3" value="3" onclick="func(b3.value)">
<input class="btn" type="button" name="mul" value="*" onclick="func(mul.value)">
</div>
<div class="row">
<input class="btn" type="button" name="b0" value="0" onclick="func(b0.value)">
<input class="btn" type="button" name="bd" value="." onclick="func(bd.value)">
<input class="btn" type="button" name="divv" value="/" onclick="func(divv.value)">
<input class="equal" type="button" value="=" onclick="displayResult.value=eval(displayResult.value)">
</div>
</div>
</form>
</div>
P.S:
I'm not saying this is a good practice, just sharing how it works.
Also value attribute returns a string, you should convert them to
number in order to perform mathematical operations.
Your result input doesn't have a default value (placeholder="0" isn't the same as value="0"), you should set it as 0 or handle the empty string value in JavaScript
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>
<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"
I have a couple of checkboxes. When one checkbox is selected, next to that checkbox a div with a message (a div with the class .feedback) should appear. This works, using next(). But when two or three checkboxes are selected next to the checked checkboxes (including the first one) a button should appear. When a checkbox is unchecked again, the button next to that checkbox should disappear again. When only one is left, the message should appear again.
I can either get it to show a button next to all checkboxes, but not next to the checked ones.
JSBIN can be found here: http://jsbin.com/egutaj/1/edit
try this
HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<form action="#" name="form">
<div>
<input type="checkbox" name="test[]" value="1" class="selectie" />
<div class="feedback"></div>
<input type="submit" class="button" value="Compare" name="submit" style="display:none;" />
</div>
<div>
<input type="checkbox" name="test[]" value="2" class="selectie" />
<div class="feedback"></div>
<input type="submit" class="button" value="Compare" name="submit" style="display:none;" />
</div>
<div>
<input type="checkbox" name="test[]" value="3" class="selectie" />
<div class="feedback"></div>
<input type="submit" class="button" value="Compare" name="submit" style="display:none;" />
</div>
<div>
<input type="checkbox" name="test[]" value="4" class="selectie" />
<div class="feedback"></div>
<input type="submit" class="button" value="Compare" name="submit" style="display:none;" />
</div>
<div>
<input type="checkbox" name="test[]" value="5" class="selectie" />
<div class="feedback"></div>
<input type="submit" class="button" value="Compare" name="submit" style="display:none;" />
</div>
</form>
<body>
</body>
</html>
CSS
.feedback
{
display:none;
padding:10px;
}
.button
{
display:block
padding:10px;
}
jQuery
var countChecked = function()
{
var n = $('input:checked').length;
if(n === 0)
{
$('.feedback').hide();
$('.button').hide();
$('.selectie').removeAttr('disabled');
}
else if(n == 1)
{
$('.feedback').text("Add 1 or 2 to compare");
$('.selectie').removeAttr('disabled');
$('.button').hide();
$(".selectie").each(function(){
if($(this).is(':checked'))
{
$(this).next('.feedback').show();
}
else
{
$(this).next('.feedback').hide();
}
});
}
else if(n >= 2)
{
$('.selectie').removeAttr('disabled');
$('.feedback').hide();
$(".selectie").each(function(){
if($(this).is(':checked'))
{
$(this).next('.feedback').next('.button').show();
}
else
{
$(this).next('.feedback').next('.button').hide();
}
});
}
};
countChecked();
$( "input[type=checkbox]" ).on( "click", countChecked );
live demo here
You'll need to use the jQuery.each () function to iterate through the checkboxes, showing or hiding its siblings as necessary.
How can I write numeric numbers into an input field by pressing a button?
Suppose I have a button:
<input type="button" value="1">
Then I want, that when numeric pad button 1 is pressed it adds numeric words just like Windows Calculator.
I'm not sure what you are asking, but this code will add numbers to an input box (using jQuery).
HTML
<input id="data" type="text" />
<br />
<br />
<input type="button" value="1" />
<input type="button" value="2" />
<input type="button" value="3" /><br />
<input type="button" value="4" />
<input type="button" value="5" />
<input type="button" value="6" /><br />
<input type="button" value="7" />
<input type="button" value="8" />
<input type="button" value="9" />
Script
$(document).ready(function(){
$(':button').click(function(){
$('#data').val( $('#data').val() + $(this).val() );
})
})