Why does this line work without .value? - javascript

function check() {
var input;
input = document.getElementById("check_btwn");
if (!input.checkValidity()) {
document.getElementById("check_message").innerHTML = input.validationMessage;
} else {
document.getElementById("check_message").innerHTML = "OK";
}
}
<input type="number" name="" id="check_btwn" min="100" max="300">
<button type="button" onclick="check()">check</button>
<p id="check_message"></p>
Why .value is not used in input=document.getElementById("check_btwn");
but it’s still working?

With innerHtml what you do is that you add any html within an id, for Ex.
<span id="Test"></span>
<script>
document.getElementById("Test").innerHtml = <h2>This is a test</h2>
</script>
As you can se the span tag will have inside it a new tag that will be an h2, with some text in it, now with value there is a difference, because what value does is that it changes the value attr of a tag, for Ex:
<input type="text" id="Test2" value=""/>
<script>
document.getElementById("Test2").value = "i am the new value"
</script>
you can also find a good documentation in
Javascript innerHtml
javascript value

Related

my value property doesn't pass me anything

I'm trying to simply get the value of an input and put it into a p tag.but it looks like that I'm not getting anything from the input tag
<body>
<input type="text" id="text">
<button class="button" onclick="sum();">click</button>
<p id="lblResult">Result</p>
</body>
<script>
const text = document.getElementById('text').value;
function sum()
{
document.getElementById('lblREsult').innerHTML = text;
}
</script>
You get value from input on page load when it's empty, move document.getElementById('text').value into sum function.
And you have an typo, lblREsult !== lblResult
function sum() {
const text = document.getElementById('text').value;
document.getElementById('lblResult').innerHTML = text;
}
<input type="text" id="text">
<button class="button" onclick="sum();">click</button>
<p id="lblResult">Result</p>

Outputting text into input field in JavaScript

Trying to press a button which outputs text in an input field. the function is to output text "x" into input field upon press, which is set to read only. only js and html allowed. Here's what i got so far in HTML and js:
<button id="button4" onclick="output()">Hokus Pokus</button>
<input id="printoutput" readonly="true" type="text">
js:
function output() {
document.getElementById("printoutput").innerHTML = "x";
}
Why does this not work?
Do it like this and it works like a charm:
function output() {
document.getElementById("printoutput").value = "x";
}
<button id="button4" onclick="output()">Hokus Pokus</button>
<input id="printoutput" readonly="true" type="text">
Fixed. did this:
function output() {
document.getElementById("printoutput").innerHTML = "x";
}
When it should be:
function output() {
document.getElementById("printoutput").value = "x";
}
You need to set the value of the input, not the inner html
document.getElementById("printoutput").value = "x";
<button id="button4" onclick="output()">Hokus Pokus</button>
<input id="printoutput" readonly="true" type="text">

JavaScript – Problems with Reset button on calculator

I have a simple calculator and I want two text fields to reset when the reset button is clicked, but for some reason it's not working. I've referenced other Stack Overflow inquiries, but some use jQuery. Is there a way to do this without jQuery? Anyways, here's the JSFiddle: http://jsfiddle.net/jsdmLr7b/
<script>
var a, b, result;
function setValues() {
a = Number(document.getElementById('leftInput').value);
b = Number(document.getElementById('rightInput').value);
}
function sum() {
setValues();
result = a + b;
document.getElementById('inputTotal').innerHTML = result;
}
function reset() {
document.getElementByID('inputLeft').innerHTML.value = "";
document.getElementByID('inputRight').innerHTML.value = "";
}
</script>
<div>
<input id="leftInput" type="text" />
<input id="rightInput" type="text" />
<input type="button" onClick="sum()" value="sum" />
<input type="button" onClick="reset()" value="reset" />
<p>Total: <a id="inputTotal"></a>
</p>
</div>
Try this:
<script>
var a, b, result;
function setValues() {
a = Number(document.getElementById('leftInput').value);
b = Number(document.getElementById('rightInput').value);
}
function sum() {
setValues();
result = a + b;
document.getElementById('inputTotal').innerHTML = result;
}
function reset() {
document.getElementById("leftInput").value = "";
document.getElementById("rightInput").value = "";
}
</script>
<div>
<input id="leftInput" type="text" />
<input id="rightInput" type="text" />
<input type="button" onClick="sum()" value="sum" />
<input type="button" onClick="reset()" value="reset" />
<p>Total: <a id="inputTotal"></a>
</p>
</div>
Your problem was that you were calling getElementByID on the document. The proper way to call this is getElementById with a lowercase "d" in "Id."
Also, you were referencing the wrong id values. They are leftInput and rightInput, not inputLeft and inputRight. It can be easy to overlook wording and case sensitivity after looking at code for hours!
I switched the reset function to use .value = ""; because it makes more sense in this case and should be used for input/form operations, while innerHTML is used for other elements (div, span, td, etc.)
You can also clear your total by adding this to the reset() function:
document.getElementById("inputTotal").innerHTML = "";
In this case you want to use innerHTML because your value is not inside an input/form operation. Here's the updated JSFiddle.
I Found A Very Simple Solution Just Wrap Your All Input in FORM Tag and Your Reset button will work Fine

Display a var in a span

<div id=name>Whats your Name?: <input type="text" id="User">
<input type="button" value="submit" onclick="giveUser()"/>
<br> I dont know your Name </br>
</div>
<br>
<div id=P2>
Oh its <span id=User>Default</span>!
</div>
<script>
function giveUser() {
var User = document.getElementById("User").value;
console.log(User)
document.getElementById('User').innerHTML = User;
document.getElementById('name').style.visibility = 'hidden';
document.getElementById('P2').style.visibility = 'visible';
}
</script>
Here i am asking the user there name through a textbox
but it won't display it in the span.
here is a fiddle demo
ID attributes should be unique. Your span and input both have an ID of User
Change the ID of one and then try again. (https://jsfiddle.net/k04pvhug/1/)
In addition, you should enclose all your attributes with quotes ("). It's not required, but it looks cleaner ;)
You need quotes around the id's.
<span id="someid" />
Then JavaScript can access the DOM and set innerHTML
Also, P2 is a pre-defined setting, so it's not aviable as an id anyway. try "paragraphTwo" or something.
Give the quotes around id and make sure that each attribute has the unique id
like this
<span id="id" />
<p id="paragraph" />
<span id="span2" />
Use a different name for the var and the id
function giveUser() {
var User = document.getElementById("User").value;
console.log(User)
document.getElementById("demo").innerHTML = User ;
document.getElementById('name').style.visibility = 'hidden';
document.getElementById('P2').style.visibility = 'visible';
}
#P2 {
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=name>Whats your Name?:
<input type="text" id="User">
<input type="button" value="submit" onclick="giveUser()" />
<br>I dont know your Name</br>
</div>
<br>
<div id=P2>Oh its <span id="demo">Default</span>!</div>

Accessing the javascript code inside the html tags

I am new to "html" and "Javascript".
<p id="pid"></p>
<script>
abc="hello";
document.getElementById("pid").innerHTML=abc;
</script>
<input type="text"
value="<script>document.getElementById("pid").innerHTML</script>"/>
How the code gets executed in the above case.
Looks like you are trying to set a value of the input field to be equal to the content of the pid paragraph. In this case you should set value property of the HTMLInputElement. You can get a reference to it using getElementById (there are many ways to get this element object) which you already know how to use. For example:
<p id="pid"></p>
<input type="text" id="input" />
<script>
var abc = "hello";
var pid = document.getElementById("pid");
pid.innerHTML = abc;
document.getElementById("input").value = pid.innerHTML;
</script>
the content of the 'value' attribute is just text, the browser will not interpret the JS code.
You can use the DOM instead:
<p id="pid"></p>
<script>
abc="hello";
document.getElementById("pid").innerHTML=abc;
</script>
<input id = "myInput" type="text" value="" />
<script>
document.getElementById("myInput").value = abc;
//OR : document.getElementById("myInput").value = getElementById("pid").innerHTML;
</script>
see : Accesing the javascript variable in html tag
I think you're trying to do this:
<script>
function myFunction(){
var abc="hello";
document.getElementById("pid").innerHTML=abc;
}
</script>
<p id="pid"></p>
<input type="button" value="Click Me" onclick="myFunction();" >

Categories