<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"
Related
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>
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>
When I click numbers, I always get the same result. Why? Here is my HTML code:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<input type="button" id="myBtn" onclick="myFunction()" value="1">
<input type="button" id="myBtn" onclick="myFunction()" value="2">
<input type="button" id="myBtn" onclick="myFunction()" value="3">
<input type="button" id="myBtn" onclick="myFunction()" value="4">
<input type="button" id="myBtn" onclick="myFunction()" value="5">
<input type="button" id="myBtn" onclick="myFunction()" value="6">
<input type="button" id="myBtn" onclick="myFunction()" value="7">
<input type="button" id="myBtn" onclick="myFunction()" value="8">
<input type="button" id="myBtn" onclick="myFunction()" value="9">
<input type="button" id="myBtn" onclick="myFunction()" value="0">
<script>
function myFunction() {
var x = document.getElementById("myBtn").value;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
1) Ids must be unique. Rewrite your HTML to use classes or unique ids.
2) To get value in myFunction you can simply pass this from elenment to access to clicked button.
<input type="button" id="myBtn" onclick="myFunction(this)" value="1">
....
function myFunction(button) {
var x = button.value;
document.getElementById("demo").innerHTML = x;
}
http://jsfiddle.net/0sewtjLs/
Still have the problem in case of more than 1digit number
Just concat string:
document.getElementById("demo").innerHTML += x;
http://jsfiddle.net/0sewtjLs/1/
try
<input type="button" id="myBtn" onclick="myFunction(1)" >
<input type="button" id="myBtn" onclick="myFunction(2)" >
<input type="button" id="myBtn" onclick="myFunction(3)" >
<input type="button" id="myBtn" onclick="myFunction(4)" >
<input type="button" id="myBtn" onclick="myFunction(5)" >
<input type="button" id="myBtn" onclick="myFunction(6)" >
<input type="button" id="myBtn" onclick="myFunction(7)" >
<input type="button" id="myBtn" onclick="myFunction(8)" >
<input type="button" id="myBtn" onclick="myFunction(9)" >
<input type="button" id="myBtn" onclick="myFunction(0)" >
<script>
function myFunction(x) {
document.getElementById("demo").innerHTML = x;
}
</script>
you can also keep logic only in Javascript, and removing the "onclick" on HTML.
In the code bellow, all your buttons have "myBtn" class. You can have infinite time the same class. But ID's are unique, be carefull.
In this code I get the all class "myBtn", wich return an Array.
On this array, I making a loop and add an eventListner listening clicks and calling the myFunction function.
<p id="demo"></p>
<input type="button" class="myBtn" value="1">
<input type="button" class="myBtn" value="2">
<input type="button" class="myBtn" value="3">
<input type="button" class="myBtn" value="4">
<input type="button" class="myBtn" value="5">
<input type="button" class="myBtn" value="6">
<input type="button" class="myBtn" value="7">
<input type="button" class="myBtn" value="8">
<input type="button" class="myBtn" value="9">
<input type="button" class="myBtn" value="0">
<script>
const allBtns = document.querySelectorAll('.myBtn');
allBtns.forEach( element => {
element.addEventListener('click', myFunction);
})
function myFunction(e) {
const value = e.target.value;
document.getElementById("demo").innerHTML = value;
}
</script>
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.
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() );
})
})