Can't access hidden inputbox value from javascript - javascript

I want to extract a value from my hidden inputbox, by using javascript, but sometimes i am getting a "undefined" error and sometimes no output.
when i did
alert(document.getElementById('hhh').value);
from inside a printIt() function i get the output. but i think somehow it is not going in to "var a", and also
var a =22;
works if i remove the
var a =document.getElementById('hhh').value;
in below code.
<script type="text/javascript">
var a =document.getElementById('hhh').value;
function startTime()
{
document.getElementById('txt').innerHTML=a;
a=a-1;
t=setTimeout('startTime()',600);
}
</script>
<body onLoad="startTime()">
<form name="form1" id="form11" method="post" action="">
<input type="hidden" id="hhh" name="time" value="11" />
</form>
<div id="txt"></div>
</body>
Any help would be appreciated.
Thanks.

You call document.getElementById('hhh') before hhh exists. Move it into a function you call onload.

var a =document.getElementById('hhh').value;
This runs before the document is loaded so the underlying element may not exist in the DOM.
You call document.getElementById('hhh') before hhh exists. Move it into a function you call onload.
var a;
function setup() {
a = document.getElementById('hhh').value;
startTime();
}
function startTime() {
document.getElementById('txt').innerHTML = a--;
setInterval(startTime, 600);
}
and run setup(); in your onload.

Leave it as an "type=input" and add the css property: display: none;
<input type="input" id="hhh" name="time" value="11" style="display: none;" />

Related

Why the button object can not use the onclick() function?

I am trying to use javascript to create a web calculator. I hope that users can calculate the result when they click the different buttons. However, there is an error in line16(Uncaught TypeError: Cannot read property 'onclick' of null). I hope someone could help me. These are my codes:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
<script type="text/javascript">
var btnadd,btnsub,btnmul,btndiv;
btnadd = document.getElementById('btnadd');
btnsub = document.getElementById('btnsub');
btnmul = document.getElementById('btnmul');
btndiv = document.getElementById('btndiv');
btnadd.onclick() = function(){
cal(add());
}
function cal(func){
var num1 = document.getElementById('num1').value;
var num2 = document.getElementById('num2').value;
parseFloat(num1);
parseFloat(num2);
var result;
result = func(num1,num2);
document.getElementById('result').value = result;
}
function add(num1,num2){
return (num1+num2);
}
function sub(num1,num2){
return (num1-num2);
}
function mul(num1,num2){
return (num1*num2);
}
function div(num1,num2){
return (num1/num2);
}
</script>
</head>
<body>
<form>
num1:<input type="text" id="num1" /><br>
num2:<input type="text" id="num2" /><br>
<input type="button" id="btnadd" value="add" />
<input type="button" id="btnsub" value="sub" />
<input type="button" id="btnmul" value="mul" />
<input type="button" id="btndiv" value="div" /><br>
result:<input type="text" id="result"/>
</form>
</body>
</html>
You need to either add the defer attribute to your script or put it at the end of the body.
Putting JS code in the head means that it will be run before the page is fully parsed. That means that there is no element with the id of btnadd just yet. If you add the defer attribute, then it will wait for the page to be parsed before running the script. Putting at the end of the body has the same effect.
In terms of your code itself, you need to set the onclick property. You cannot assign a function like that. Also, do val2 = parseFloat(val2) rather than parseFloat(val2). (similarly for val1) because here you need to reassign the value
Because you didn't define the onclick correctly
Instead of
btnadd.onclick() = function(){
cal(add());
}
try
btnadd.onclick = function(){
cal(add);
}
Check this codepen : https://codepen.io/zecka/pen/NWrejxO
Note that there are other errors in your code that will prevent you from making it work as you want.

Javascript passing data between text boxes

I'm working on getting data to go from one textbox to another using javascript. Im new to Javascript and im getting a document undefined or null error.
<!DOCTYPE html>
<html>
<head>
<script>
function doit() {
window.document.form1.txtbox1.value= window.document.form2.txtbox2.value;
}
</script>
</head>
<body>
<form name="form1">
Enter your name:
<input type="text" name="txtbox1" value="">
<input type="button" name="btn1" value="Click" onclick="doit()">
</form>
<br><br><br>
<form name="form2">
Results:
<input type="text" name="txtbox2" value="">
</form>
</body>
</html>
It seems that you are trying access the element as a property of the DOM.
Instead, you should use document.getElementsByName method.
Revised function:
function doit(){
// The [0] is for accessing the first item.
// If you are unfamiliar with arrays, visit
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
document.getElementsByName("txtbox1")[0].value = document.getElementsByName("txtbox2")[0].value;
}
You need to switch (swap) them :
window.document.form1.txtbox1.value= window.document.form2.txtbox2.value;
When you click a button - you set the value of the second input to the first one and probably the second input called 'Result' is empty.
Try:
function doit() {
window.document.form2.txtbox2.value = window.document.form1.txtbox1.value;
}
There should not be any error, it's just pass data in another direction as you probably expect.
Give a unique ID to both the input element.
<input type="text" id="txtbox1" value="">
<input type="text" id="txtbox2" value="">
and in function doit()
document.getElementById("txtbox2").value = document.getElementById("txtbox1").value

javascript onkeypress input text

I am learning Javascript.. Below code working only if my script tag below my input text element, but if i place code above input text tag, its not working. May I know why? Below is code:
<head>
</head>
<body>
<input type="text" id="name" >
<script type="text/javascript">
var txtId = document.getElementById('name');
txtId.addEventListener('keypress', function(e){
console.log('Pressed!')
})
</script>
</body>
Below code is same as above except that I am using function, inside which I am using same code as above. But in this case, my script tag is above input text tag, and its working. How it's working in this case? Below is the code:
<head>
<script type="text/javascript">
function keyPressListener(){
var txtId = document.getElementById('name');
txtId.addEventListener('keypress', function(e){
console.log('Pressed!')
})
}
</script>
</head>
<body>
<input type="text" id="name" onkeypress="keyPressListener()">
</body>
So, what exactly difference between above 2 codes?
When you are using the onkeypress attribute. It actually works the same way as the addEventListener. You just have to write a simple function and call it in onkeypress
<input type="text" id="name" onkeypress="keyPressed()">
<script>
function keyPressed(){
console.log('Key Pressed');
}
</script>
Why is not working to place above the input
-Because document was not ready .so you need body.onload event .see the body onload=start() it will apply the js function after body loaded
<body onload="start()">
<input type="text" id="name">
<script type="text/javascript">
function start() {
var txtId = document.getElementById('name');
txtId.addEventListener('keypress', function(e) {
console.log('Pressed!')
})
}
</script>
</body>
And the second one -you are using two function in a single event. So use with any one of the event
if use with inline keypress of keyPressListener() else use Dom event of the
keypress (addEventListener)
*Note:
Dont include the addEventListener() inside keyPressListener() .
If you use with addEventListener() remove the onkeypress event inline of the markup.
because both are same action .
<head>
<script type="text/javascript">
function keyPressListener() {
console.log('Pressed!')
}
</script>
</head>
<body>
<input type="text" id="name" onkeypress="keyPressListener()">
</body>
You can use addEventListener.
Or try this as your input:
Add a ; after keyPressListener():
<input type="text" id="name" onkeypress="keyPressListener();">
If that doesn't work try this:
<input type="text" id="name" onkeypress="keyPressListener(); return true;">
HTML5 knows that when you use an onkeypress attribute that it needs to call the JavaScript function when the key is pressed. You can basically put any functional JavaScript in the parameter for the onkeypress="(JavaScript goes here)" attribute.
You can also just grab the element from the DOM and then add the event listener to the element like so:
jQuery: $('#name').onkeypress( function() { //code goes here } );
Regular Js: document.getElementById('name').onkeypress( function() { //code goes here } );

Treat html form value as a JavaScript statement

Is there any way to submit a JavaScript statement in a form, (like alert("nefvn");) and then execute it's value as a statement?
[..omitted..]
<script type="text/javascript"
function doSomething(){
//Like this?
var a = document.forms[0].elements[0].value;
a;
return;
//Or just this?
document.forms[0].elements[0].value;
}
</script>
</head>
</body>
<form>
<input type="text" id="doThis">
<input type="button" onClick="doSomething()"
</form>
[..omitted..]
eval(a) will (try to) execute the javascript code in a. Try to avoid it for any non-testing purposes.
Set OnClick to "var = 'X'; doFunction()".

html form.input.value is not getting printed why?

...
<script type="text/javascript">
function printvalues() {
document.write("This is my first JavaScript!");
document.write(form.inputobj1.value);
document.write(form.inputobj2.value);
}
</script>
<form name="form">
<input name="inputobj1" value="123" />
<input name="inputobj2" value="abc"/>
<input type="button" onclick =" printvalues();">
</form>
why this line is not printing the value document.write(form.inputobj1.value);
The document.write overwrites the current document. Once done that, the whole <form> element disappears from the DOM and hence it and its input elements cannot be found.
Replace document.write(...) by for example alert(...) and it should work.
Alternatively you can write it as innerHTML of another element. E.g.
<script type="text/javascript">
function printvalues() {
var div = document.getElementById("divId");
div.innerHTML += "This is my first JavaScript!";
div.innerHTML += form.inputobj1.value;
div.innerHTML += form.inputobj2.value;
}
</script>
<form name="form">
<input name="inputobj1" value="123" />
<input name="inputobj2" value="abc"/>
<input type="button" onclick =" printvalues();">
</form>
<div id="divId"></div>
Note that this is not the "best practice", but since you're learning... When done with core Javascript, I recommend you to get yourself through jQuery. It's a Javascript library which greatly eases DOM manipulation like that and more ;)
document.write()
is probably not what you want. It will overwrite the entire contents of the page. The reason you're getting that error is because when you call document.write, it removes all the previous content, and thus the page will no longer have a form element.
Normally you would use a function such as document.getElementById to get a DOM element. For example:
alert( document.getElementById('inputobj1_id').value );
For DOM element:
<input id="inputobj1_id" name="inputobj1" value="123" />
<script type="text/javascript">
function printvalues() {
var x = document.form.inputobj1.value;
var y = document.form.inputobj2.value
document.write("<Html><head></head><body><h1>");
document.write("This is my first JavaScript!</h1></br><h3>");
document.write(x);document.write("</h3></br><h3>");
document.write(y);document.write("</h3></body></html>");
}
</script>
<form name="form">
<input name="inputobj1" value="123" />
<input name="inputobj2" value="abc"/>
<input type="button" value="click" onclick =" printvalues();">
</form>

Categories

Resources