Input length is undifined - javascript

< Why Input Length Is Undifined
Js
function calc() {
var inp = document.getElementById("inp");
var result = document.getElementById("result");
var inpval = inp.value
result.innerHTML = inpval;
alert(inp.length);
}
Html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<input id="inp" class="inp" Type="number"/>
<center>
<div id="calc" class="calc" onclick="calc()">Calculate</div>
<br />
<br />
<p id="result"></p>
</center>
</body>
</html>
Please help me with this code I don't know why I am getting this error whenever I click on function it always shows undifined

getElementbyId returns Element and the Element has no length property. This is the reason why that output is undefined. So if you want to get the length of the value of the input element, you have to access input element with value property like inp.value or inpval.
After then, you can get the length of that like inp.value.length or inpval.length.

Related

Proper Use of Nan

How would I implement NaN and have Inavlid input display in a element
To do this I have to use isNaN to verify that numerical values are input.
I just want it to display "Invalid input" whenever a non numeric value is put in either of the two first text boxes.
http://jsfiddle.net/hq3m1uns/1/ this is my fiddle link
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Question2</title>
<style>
</style>
<script type="text/javascript">
window.onload = function(){
};
function add_number(){
var first_number = document.querySelector("#tb1").value;
var second_number = document.querySelector("#tb2").value;
var First = parseInt(first_number);
var Second = parseInt(second_number);
var result = First + Second;
document.getElementById('tb3').setAttribute("value",result);
}
</script>
</head>
<body>
<div>
<h1>Add two number using text box as input using javascript</h1>
</div>
Enter First Number : <br>
<input type="text" id="tb1" name="TextBox1">
<br> Enter Second Number : <br>
<input type="text" id="tb2" name="TextBox2">
<br> Result : <br>
<input style="width: 50%" type="text" id="tb3" name="TextBox3" >
<br>
<input onclick="add_number()" type="button" id="b1" value="GO" />
</body>
</html>
Just add a paragraph tag in your HTML file with id "msg" and do the following changes in your javascript code.
function add_number() {
var first_number = document.querySelector("#tb1").value;
var second_number = document.querySelector("#tb2").value;
if (isNaN(first_number) || isNaN(second_number)) {
document.getElementById('msg').innerHTML = "Invalid Input";
} else {
document.getElementById('msg').innerHTML = "";
var First = parseInt(first_number);
var Second = parseInt(second_number);
var result = First + Second;
document.getElementById('tb3').setAttribute("value", result);
}
}
<p id="msg"></p>
One way is to use a keyup event listener on the input field to validate the numeric value and update the textContent of the paragraph element based on its validity.
Another solution is to use a input type="number" for the input and use HTML5's checkValidity/reportValidity on it, but I'll leave that for you to research and learn about on your own.
function validate(inputId, helpId) {
var value = document.getElementById(inputId).value;
var help = document.getElementById(helpId);
if (isNaN(value))
help.textContent = "invalid input"
else
help.textContent = ""
}
Enter First Number : <br>
<input type="text" id="tb1" name="TextBox1" onkeyup="validate('tb1', 'help1')">
<p id="help1"></p>

Change the first and second text input value when they don't have an ID

I know how to change the text input value with javascript if they have IDs, but what if they don't have IDs? I need to find and change the value of the first, and second text input on the page. How would I do that?
<input type="text" id="text" value="no value">
<button onclick="myFunction()">Change Values</button>
function myFunction() {
document.getElementById("text").value = "Text is now changed";
}
I need to know how to change the first and second input text's value on the page if they don't have an ID. For example, change "no value 1" to "yes value 1", and "no value 2" to "yes value 2". How would I do that?
<input type="text" value="no value 1">
<input type="text" value="no value 2">
If i understand your question correctly, using document.getElementsByTagName is one answer.
const inputElements = document.getElementsByTagName('input');
inputElements[0].value = "insert input 1";
inputElements[1].value = "insert input 2";
check this jsfiddle (https://jsfiddle.net/hentleman/09tr7bku/1/)
Old school, but still works:
function changeEm() {
document.forms[0][0].value = "yes value 1";
document.forms[0][1].value = "yes value 2";
}
<body onload=changeEm()>
<form>
<input type="text" value="no value 1">
<input type="text" value="no value 2">
</form>
</body>
There are many document elements query methods, one of them is document.getElementsByTagName.
This method returns an HTMLCollection, which is an iterable of HTML objects.
Having this knowledge, let's say you have the following HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Get Inputs</title>
</head>
<body>
<input type="text" value="First" />
<input type="text" value="Second" />
</body>
</html>
You could get all the input elements in your HTML using document's getElementsByTagName as follows:
const inputEls = document.getElementsByTagName("input");
inputEls will contain a HTMLCollection of HTMLInputElement, now we are able to iterate the collection and do something with it.
The final JavaScript must look like the following:
const inputEls = document.getElementsByTagName("input");
for (let input of inputEls) {
// Here you are able to access every input element of te collection
// And consume HTMLInputElement object
console.log(input.value);
}

How to get text field values in Javascript

I have the following HTML/JS code:
<!DOCTYPE html>
<html>
<body>
<input type='text' id='action' placeholder='defualt'>
<button type='button' onclick='document.getElementById("action").placeholder="it worked!"'>Change Placeholder</button>
</body>
</html>
When the button is pressed, the placeholder value of the action text input field is set to 'it worked!'
What I would like to do is make the script set the placeholder of the field whatever the user puts into it when the user presses the button. How should I do this?
To access the input element's value, you can access .value property. Then just like you set the placeholder, you can assign that to .placeholder property.
Finally, if you wish to have the placeholder visible immediately, you can reset the value by setting it to an empty string.
function setPlaceHolder() {
var input= document.getElementById("action");
input.placeholder=input.value;
input.value = "";
}
<!DOCTYPE html>
<html>
<body>
<input type='text' id='action' placeholder='defualt'>
<button type='button' onclick='setPlaceHolder();'>Change Placeholder</button>
</body>
</html>
Try this
function myfns() {
var x = document.getElementById("action").value;
console.log(x)
document.getElementById("action").placeholder = x
document.getElementById("action").value = "";
}
<html>
<body>
<input type='text' id='action' placeholder='defualt'>
<button type='button' onclick='myfns()'>Change Placeholder</button>
</body>
</html>

Set Input Value to Javascript Variable

Let's say I have a variable called x in javascript. How can I set the value of a text input (HTML) to that variable? For example:
The value of the input will now be Swag
<input type="text" value="Swag" />
But if I want the value to be a javascript variable? How do I do? Something like this? (I am just guessing, trying to make my point clear)
<input type="text" value="variable.x" />
You can set it in your javascript code like:
<input id="myInput" type="text" value="Swag" />
<script>
var test = "test";
document.getElementById("myInput").value = test;
</script>
This is a better solution and will probably avoid confusion for newbies...
<!DOCTYPE html>
<html>
<body>
<h1>Input and Display Message</h1>
<p>Enter a message</p>
<input type="text" id="msg" ><br>
<button onclick="displayMessage()">Click me</button>
<p id="showinputhere"></p>
<script>
function displayMessage(){
let themsg = document.getElementById("msg").value;
if (themsg){
document.getElementById("showinputhere").innerHTML = themsg;
}
else{
document.getElementById("showinputhere").innerHTML = "No message set";
}
}
</script>
</body>
</html>

generate textboxes based on number enter by user

I want when a user enter number in the textbox and click set, textboxes appear based on the number he entered and this what I come up with but it is not working please help
<html>
<head>
<script>
function generate(){
var a=parseInt(document.getElementById("nochapter").value);
for (i=0;i<=a,i++){
document.getElementById("ch").innerHTML="<input type='text' >"}}
</script>
</head>
<body>
<h1> Prepare new assessment</h1>
<form>
No. of Chapter included <input type="text" id="nochapter" >
<input type ="button" value="set" onclick="generate()">
<div id="ch"></div>
Your code should be like this.
Is better append an input element to the div.
<head>
<script>
function generate() {
var a = parseInt(document.getElementById("nochapter").value);
var ch = document.getElementById("ch");
for (i = 0; i < a; i++) {
var input = document.createElement("input");
ch.appendChild(input);
}
}
</script>
</head>
<body>
<h1> Prepare new assessment</h1>
<form>
No. of Chapter included
<input type="text" id="nochapter" />
<input type="button" value="set" onclick="generate()" />
<div id="ch"></div>
</form>
</body>
There is small glitch in your written code
for (i=0;i<=a,i++) --> for (i=0;i<=a;i++)
even if you change that it will generate only one text box because you are replacing innerHTML for every iteration. so prepare the string separately based on no of iteration and assign it to innerrHTML. it should work.

Categories

Resources