The title is kinda confusing because I find it hard to explain. Basically, I can get 1 input button to have one id name that a JavaScript function will store into a variable and display it by replacing an empty paragraph tag with the variable. However, I can't get it to work with multiple buttons with the same function, since I'm trying to get a number keypad going with buttons, and having it display the result. I think I need to use the push() method to somehow add values, then click a submit button, then have the resulting string displayed. I know how to use push with known variables, but I don't know how to implement it with unknown variables, though:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
Anyways, my code is here, with the input buttons with only 1 button with the i, and etc. jQuery answers are welcome, but I don't prefer jQuery, as I'm asking about JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>Desperate</title>
<script type="text/javascript">
function othername() {
var inputinput = document.getElementById("userInput").value;
var n = inputinput.length;
document.getElementById("demo").innerHTML = n;
}
</script>
</head>
<body>
<p id="demo"></p>
<input id="text" type="text">
</div>
<div>
<input id="userInput" type="button" value="1" onclick="othername();" />
<input id="btn2" type="button" value="2" onclick="othername();" />
<input id="btn3" type="button" value="3" onclick="othername();" />
</div>
</body>
</html>
All help is greatly appreciated! Thank you!
You should bind your onclick event handler in a different way. Then you can examine the incoming event in your "othername" function and get the value of the element clicked.
<!DOCTYPE html>
<html>
<head>
<title>Desperate</title>
<script type="text/javascript">
function othername(e) {
var n = e.srcElement.value || '';
document.getElementById("demo").innerHTML = n;
}
</script>
</head>
<body>
<div>
<p id="demo"></p>
<input id="text" type="text">
</div>
<div id="btns">
<input id="userInput" type="button" value="1" />
<input id="btn2" type="button" value="2" />
<input id="btn3" type="button" value="3" />
</div>
<script>
var btnC = document.getElementById("btns");
btnC.onclick = othername;
</script>
</body>
</html>
Related
I have a script that builds a html box to input values to use in the script afterwards. Before I used input text. But the values inserted were often wrong, which caused annoyance by the users. And me.
So I want to use a button instead of text input. The button has to toggle between two or more values when clicked. Then when I submit the form, the values have to be passed to the script.
But the onclick doesn't seem to work. What am I missing?
The variable "vervanger" is put in place of "vervanger2" in the html box.
I get the button in my browser but nothing happens when I click on it.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var lijst=[];
function selector(){
for (i=0;i<vervanger1;i++){
if (document.getElementById(i).checked==true){
lijst.push(document.getElementById(i).value);
}
if (document.getElementById(i).name.toString().split(":")[0]=="overzicht"||document.getElementById(i).name.toString().split(":")[0]=="evalueer"){
lijst.push(document.getElementById(i).name+":"+document.getElementById(i).value);
}
}
google.script.run.handleFormSubmit(lijst);
}
function change(e){
var btn = document.getElementById(e);
btn.value = 'my value'; // will just add a hidden value
btn.innerHTML = 'my text';
}
</script>
</head>
<body>
<br />
<br />
<FORM NAME="myform" onSubmit="selector()">
<input type="button" onclick="change(0)" size="3" id="0" style="text-align: center" name="Eval" value="E" /input>TEST STRING<br />
<br />
<br />
<input name="Submit" type="submit" value="OK" />
</FORM>
</body>
You have got your button type wrong.
<input name="Submit" type="submit" value="OK" />
This will post your form.
Change it to "button" and you should be good to go..
I found a solution. Thanks to various other posts on Stackoverflow.
Now I'm able to toggle between values by pushing the button.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var lijst=[];
function selector(){
for (i=0;i<vervanger1;i++){
if (document.getElementById(i).checked==true){
lijst.push(document.getElementById(i).value);
}
if (document.getElementById(i).name.toString().split(":")[0]=="overzicht"||document.getElementById(i).name.toString().split(":")[0]=="evalueer"){
lijst.push(document.getElementById(i).name+":"+document.getElementById(i).value);
}
}
google.script.run.handleFormSubmit(lijst);
}
function change(e,choices){
var btn = document.getElementById(e);
var chs=choices.toString().split("/");
var check="nee";
for (c=0;c<chs.length;c++){
if (chs[c]===btn.value){
check="ja";
var nr=c;
}
}
if (check=="ja"&&nr<chs.length-1){
btn.value=chs[nr+1];
}else{
btn.value=chs[0];
}
}
</script>
</head>
<body>
<br />
<br />
<FORM NAME="myform" onSubmit="selector()">
<input type="button" onclick="change(0,'A/B/C')" size="3" id="0" style="text-align: center" name="Eval" value="E" /input>TEST STRING<br />
<input type="button" onclick="change(1,'A/B/C')" size="3" id="1" style="text-align: center" name="Eval" value="E" /input>TEST STRING<br />
<br />
<br />
<input name="Submit" type="submit" value="OK" />
</FORM>
</body>
I am trying to send the result from a number input to a js function, and can't seem to make it work. I have tried with some answers from other questions in the site, but was still unable.
My code goes something like this:
<input type="number" name="example">
<INPUT TYPE="button" NAME="button" Value="Click" onClick="how(example)">
<script type="text/javascript">
function how(example){
alert("example");
}
</script>
Thanks!
Give the id of your number input. May be it will useful.
<input type="number" name="example" id="example">
<INPUT TYPE="button" NAME="button" Value="Click" onClick="how()">
<script type="text/javascript">
function how(){
var number = $('#example').val();
alert(number);
}
</script>
Use .value to get the value of a text/number input or textarea element.
const numInput = document.querySelector('input[type="number"]')
document.querySelector('input[type="button"]')
.addEventListener('click', () => {
console.log(numInput.value);
});
<input type="number" name="example">
<input type="button" value='click'>
Try to use addEventListener rather than HTML-inline-eval handlers, or on*-handlers; keeping all of your Javascript in the Javascript itself is helpful and is a good habit to get into.
This might help you (this code will make it so that it alerts the value in number):
function alertval(){
alert(document.getElementById("example").value);
}
<input type="number" name="example" id="example">
<INPUT TYPE="button" NAME="button" Value="Click" onClick="alertval()">
I'm currently writing some code using both HTML and Javascript. I'm building myself a mini Javascript calculator that can run simple additions using a HTML 'GUI' - if you take it that way. The code is below.
<!DOCTYPE html>
<html lang="en">
<head>
<link href="stylesheet/calculator.css" type="text/css" rel="stylesheet" />
<script>
function activeButton() {
if (document.getElementById("radioAdd").checked === true) {
var valueOne = Number(document.getElementById("number1".value));
var valueTwo = Number(document.getElementById("number2".value));
var result = valueOne + valueTwo;
alert("Your Result Is " + result);
}
}
</script>
</head>
<body>
<div id="wrapper">
<div id="form-move">
<form name = "calculator" id="calculator">
<div id="numberInput">
<input type="number" name="inputNumber1" id="number1" placeholder="Type or Select Your First Number" />
<input type="number" name="inputNumber2" id="number2" placeholder="Type or Select Your Second Number" />
</div>
<div id="radio-input">
<span class="title">Operators:</span>
<input type="radio" name="radioInputAdd" id="radioAdd" value="Addition" />
<label for="radioAdd">Addition</label>
<input type="radio" name="radioInputAdd" id="radioDivision" value="Division" />
<label for="radioDivision">Division</label>
<input type="radio" name="radioInputAdd" id="radioMultiply" value="Multiplication" />
<label for="radioMultiply">Multiply</label>
<input type="radio" name="radioInputAdd" id="radioSubtract" value="Subtraction" />
<label for="radioSubtract">Subtract</label>
</div>
<div class="submit">
<input type="submit" value="Enter" id="submit" onclick="activeButton()" />
</div>
</form>
</div>
</div>
There are TWO input boxes in the middle of the page, which only accept numbers.
Underneath them are four radio buttons - Add, division, Multiply and Subtract. Now, You can see the javascript incorporated at the top of the page. The problem I have is that when I run the page and want to add two numbers, the code works but the answer comes out as 0. I have tested this in chrome and this happens all the time.
Could Someone Possibly please help?
The problem is in how you're trying to get the value from the input elements. In this code:
var valueOne = Number(document.getElementById("number1".value));
var valueTwo = Number(document.getElementById("number2".value));
You're trying to get the value property from the string "number1", which is undefined, then passing that to document.getElementById, which will return null, and then passing that to Number, which will return 0.
Try this this instead:
var valueOne = Number(document.getElementById("number1").value);
var valueTwo = Number(document.getElementById("number2").value);
Try this:
var valueOne = Number(document.getElementById("number1").value);
var valueTwo = Number(document.getElementById("number2").value);
You have the paranthesis in the wrong place.
This is my page code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Marketing Tracking</title>
</head>
<body>
<form action="#" id="form" method="post">
<div id="namevalues">
<span id="span:1">
<input type="text" id="name:1" onchange="changed(this)" style="width:300px;"/>
<input id="value:1" type="number" min="0" value="0" /><br /></span>
</div>
<input type="button" id="add" value="Add 1" />
<br />
<textarea name="talk" style="width:500px;height:175px;"></textarea>
<br />
<input type="button" id="update" value="Update"/>
</form>
<script>
function get(a){return document.getElementById(a);}
up=get("update");
up.onclick = function(){
get("form").submit();
}
get("name:1").onchange = function(){changed(this)};
get("add").onclick = function(){add()};<% z=2 %>
function changed(ele){
id=ele.id;
val=ele.value;
id=id.split(":")[1];
get("value:"+id).name=get("name:"+id).value;
}
function add(){
document.getElementById("namevalues").innerHTML+='<span id="span:'+z+'"><input type="text" id="name:'+z+'" onchange="changed(this)" style="width:300px;"/><input id="value:'+z+'" type="number" min="0" value="0" /><br /></span>';
}
</script>
</body>
</html>
I am very confused as to why when I press the Add 1 button enter some text and then press the Add 1 button again the text that I just entered disappears!
If anyone could give some insight to this it would be greatly appreciated.
The reason your other values disappear is because when you do something.innerHTML += something it will rewrite the HTML for that zone (meaning what was there before is gone and will be replaced with fresh new HTML). What you probably want to do is something along this :
function add(){
var div = document.createElement("div");
div.innerHTML = '<span id="span [... the rest of the code ...]<br /></span>';
document.getElementById("namevalues").appendChild(div);
}
Using appendChild won't alter the other element that are already in the div namevalues.
Just a small thing but try using
<script type="text/javascript">
When I was using inner.document stuff I had all kinds of problems until I added that code.
When I add text to a div in a chrome extension popup, the text appears for a fraction of a second and then immediately dissappears again.
This is a small example:
<html>
<head>
<script>
function show() {
var newName = document.showMe.textToShow.value;
var txt = document.createTextNode(newName);
document.getElementById("feedback").appendChild(txt);
}
</script>
</head>
<body>
<form name="showMe">
Name: <input type="text" name="textToShow" /><br />
<input type="submit" value="Show" OnClick="show()" />
</form>
<div id="feedback"></div>
</body>
</html>
What am I doing wrong?
Thanks,
Miel.
It works, but then the form gets submitted. You have to suppress sending the form like this
<input type="submit" value="Show" OnClick="show(); return false" />
or use a button:
<button type="button" onclick="show()">Show</button>