Javascript Alert is not displaying - javascript

I working on a simple JavaScript code and having some trouble getting my alert to display from my code. From what I understand the script should cause an alert box to pop up and display.
Here is the HTML:

The problem is you have not assign any id or anything to get the value. Here is the code ,please try this.
<input type = "text" value = "" id="input1" name="" >
<input type = "text" value = "" id="input2" name="" >
<button onClick="add()"> Add </button>
function add()
{
var input1 = document.getElementById("input1").value;
var input2 = document.getElementById("input2").value;
alert(parseInt(input1) + parseInt(input2));
}

You need to specify ID in the input tags then try to call the alert using JS.

Related

Changing the value of a input box in HTML within a script

Statement In JS HTML5 I have a input box defined as
<input type="number" id="Numerator" value=40>
<input type="number" id="Denominator" value=48>
I want to change the value of these within a script.
Question: What HTML5 command will allow me to change the value of id="Numerator"?
Example
var k = 2
(insert command here to change id="Numerator" to value k)
I know how to pull the value using
document.getElementbyID("Numerator").value
but I cannot figure out how to change the value of that id....
any help would be appreciated and I could not find that value...
You have a typo in your getElementbyID. It should be getElementById:
var k = 2;
document.getElementById("Numerator").value = k;
<input type="number" id="Numerator" value=40>
<input type="number" id="Denominator" value=48>
Try This:-
document.getElementById("Numerator").value = "My value";
https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
var el = document.getElementbyID("Numerator");
el.setAttribute("ID", "your-new-id");
You can use like this
document.getElementById('Numerator').value = "Set Value To textbox using javascript";

Javascript onKeyUp condition doesnt work when speed typing

my simple html file code
Site Name: <input id="name" type="text" onkeyup="myFunction1(event,this)">
URL : <input id="url" type="text">
javascript code
function myFunction1(event,t){
var nameval= document.getElementById("name").value;
var urlval= document.getElementById("url").value;
var namelen = nameval.length;
var urllen = urlval.length;
var res = nameval.substring(1, namelen);
if(res.length == urllen){
document.getElementById("url").value = t.value;
}
else{
alert("string lengths are not matching");
}
}
what i want to do when user type Site Name in textbox, same text should reflect to URL textbox if name and url text boxes have same text lenghts . but when i speed type site name, my if condition fail after typing few characters and it goes to else block. i dont know why this happening. can anyone help me to improve this code?
Using the onkeyup event isn't your best option for what you are trying to do. You can use the oninput event instead. Here's the modified HTML:
Site Name: <input id="name" type="text" oninput="myFunction1(event,this)">
URL : <input id="url" type="text">

JS: How to print a value from a text box into the screen?

I want to print a value onto the screen based on text in the input (textbox) in the form.
<input type="text" name="pesos" value="">
<button onclick="conversorMonedas()">Convertir!</button>
<p id="resultado"></p>
function conversorMonedas() {
var pesos = document.getElementById("pesos");
document.getElementById("resultado").innerHTML = pesos.value;
}
When I click the button, the error at the console appears briefly and then disappears. I managed to read it and it says that pesos.value is null.
How can I print out what I wrote in the text box? Thanks!
You don't have element with id pesos. Add id to your input:
<input type="text" name="pesos" id="pesos" value="">
By using
var pesos = document.getElementById("pesos");
You're querying for something that has the id property set to pesos, looking at your HTML code you're not setting the id of your <input>
Simply add it, it should be like this:
<input type="text" id="pesos" name="pesos" value="">
There is no element with id pesos. So either add id="pesos" to input or modify your function to use getElementByNames as
$scope.conversorMonedas = function() {
var pesos = document.getElementsByName("pesos")[0];
document.getElementById("resultado").innerHTML = pesos.value;
}
But this may not work in cases you have multiple elements with this same name
<input id="input" type="text" name="text">
function Val() {
var x = document.getElementById("input").value;
document.getElementById("print1").innerHTML = x;
}
<input id="input" type="text" name="box">
<button id="btn" type="button" name="button"
onclick="Vale()">Post</button>
<span id="print1"></span>
var post = []
function Vale() {
const val = document.querySelector('input').value;
document.getElementById('input').value = "";
console.log(val);
post.push(val)
document.getElementById('print1').innerHTML = val
console.log(post);
}

Javascript to html tag ~ passing a variable

So my question is, how do I pass variables to javascript functions through html input boxes?
Like, let's say I have a function:
function Call(number, text, callerID, CallerIDName, PassCode)
How would I make an input box in html so that when the user submits a value into the box, it would set the variable for that corresponding box?
All help is appreciated, thanks!
Try something like this...
Name: <input type="text" id="number"><br>
Text: <input type="text" id="text"><br>
Caller Id Name: <input type="text" id="CallerIDName"><br>
Passcode: <input type="text" id="Passcode"><br>
<script>
function Call() {
var number = document.getElementById("number").value;
var text = document.getElementById("text").value;
var CallerIDName = document.getElementById("CallerIDName").value;
var Passcode = document.getElementById("Passcode").value;
//do something here...
}
</script>
<button onclick="Call();">Click to Call</button>
Let's say you have an input tag for the "number" parameter:
<input type="text" id="number" />
You can then obtain the value of the field like this;
document.getElementById("number").value
You can find a few examples here. Let me know if I misunderstood your question.

Why can't I get the value of this text input field?

I have a div, which contains a text input field:
<div id="age" class="fullScreen">
<input type="text" id="age" class="textInput" placeholder="Please enter age..." />
<button type="button" onclick="submitAge()">Submit</button>
</div>
submitAge() looks like this:
function submitAge() {
var ageVal = document.getElementById("age").text;
alert(ageVal);
}
But in Google Chrome and Webkit Nightly I see an alert with the text "undefined" (I can't test in any other browsers because the page contains web-sockets).
The chrome developer tools show this:
I assume that the problem is that the input is not in a form, but I don't want it to be in a form because I will be submitting the data via websockets.
Do I have to put it in a form or is there a better solution?
Thanks.
You have redefined the id "age". Rename either your div or input and you should be fine.
Try:
function submitAge() {
var ageVal = document.getElementById("age").value;
alert(ageVal);
}
var ageVal = document.getElementById('age').value;
alert(ageVal)
Note the .value instead of text
Change:
var ageVal = document.getElementById("age").text;
to
var ageVal = document.getElementById("age").value;
You <div> has the id of age. This is going to return either the div or an array of HTMLElements. Get a unique id of the input and you will be golden
Try
document.getDocumentById("age").value;

Categories