<!doctype html>
<html>
<head>
<script>
var a=document.getElementById("one").value;
console.log(a);
</script>
</head>
<body>
<input type="text" id="one" name="acc" value="iss">
</body>
</html>
In the above code snippets I am trying to print the value associated with input which has id ="one".
But I am getting error as
cannot read property 'value' of null.
You need to put your JavaScript at the end of the body. Placing it in head, means, it will execute even before the DOM elements are ready. Placing it at the end of body, means, JS will execute after the body elements are loaded:
<html>
<body>
<input type="text" id="one" name="acc" value="iss" />
<script type='text/javascript'>
var a = document.getElementById('one').value;
console.log(a);
</script>
</body>
</html>
If you use JQuery, then your code should be in $(document).ready(function(){ ... })
you need to place the <script>...</script> part at the end of your document:
<!doctype html>
<html>
<body>
<input type="text" id="one" name="acc" value="iss">
<script>
var a=document.getElementById("one").value;
console.log(a);
</script>
</body>
</html>
Or you use document.onready event:
<!doctype html>
<html>
<head>
<script>
document.addEventListener("load", function() {
var a=document.getElementById("one").value;
console.log(a);
});
</script>
</head>
<body>
<input type="text" id="one" name="acc" value="iss">
</body>
</html>
Related
Jets File : https://cdnjs.cloudflare.com/ajax/libs/jets/0.14.0/jets.min.js
Html File :
<!DOCTYPE html>
<html>
<head>
<script src="assets/jets.js"></script>
</head>
<body>
<script>
var jets = new Jets({
searchTag: '#jetsSearch',
contentTag: '#jetsContent'
});
</script>
<input type="search" id="jetsSearch">
<div id="jetsContent">
<div>Barry Williamson</div>
<div>Francis Reeves</div>
<div>…</div>
</div>
</body>
</html>
I want to get this result
Jets.js
Search field for several words
You're HTML is out of order. It should look like this:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jets/0.14.0/jets.min.js"></script>
</head>
<body>
<input type="search" id="jetsSearch">
<div id="jetsContent">
<div>Barry Williamson</div>
<div>Francis Reeves</div>
<div>…</div>
</div>
<script>
var jets = new Jets({
searchTag: '#jetsSearch',
contentTag: '#jetsContent'
});
</script>
</body>
</html>
Here is the code from the book "HTML 5 + JS for Dummies", looking at it for more than 2 hours and can't find a reason why it doesn't want to work. I'm in very early stage and sorry for my newb question.
<!DOCTYPE html>
<html>
<head>
<title> Outputting data to HTML </title>
<script language ="JavaScript">
{
document.getElementById("myText").
innerHTML ="Clicked!";
}
</script>
</head>
<body>
<h1> Creating HTML Element Output </h1>
<div> <p id="myText">Change Me </p> </div>
<div>
<input id="btnClickMe"
type="button"
value = "Click me"
onlick="WriteText()"/>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title> Outputting data to HTML </title>
<script>
function WriteText()
{
document.getElementById("myText").
innerHTML ="Clicked!";
}
</script>
</head>
<body>
<h1> Creating HTML Element Output </h1>
<div> <p id="myText">Change Me </p> </div>
<div>
<input id="btnClickMe"
type="button"
value = "Click me"
onclick="WriteText()"/>
</div>
</body>
</html>
Here's what i did/what was wrong:
You have used wrong syntax for functions or you forgot to use the function keyword
You misspelled onclick (onlick)
I moved the script part out of the head
Use setAttribute method because input filed have not innerHTML property.
`<script language ="JavaScript">
function WriteText()
{
document.getElementById("myText").setAttribute("value", "Clicked!");
}
</script>
</head>
`
The following code does not work
<!DOCTYPE html>
<html>
<body>
<input type="text" id="searchTxt"/>
<input type="button" id="run"/>
<script>
$(document).ready(function() {
$("#run").click(function(){
var input = document.getElementById("searchTxt");
alert(input);
});
});
</script>
</body>
</html>
How can I get and print the value in the text box ?
You have to include the jQuery JS file inside your <head> tag.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
.value on the element return by the getElementById function
<html>
<head>
<script>
function view_more(pg_no){
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="view_more('1')"></span>
</body>
</html>
Here, I can't understand why it say always
[ReferenceError: view_more is not defined]
I got the same problem today.
My situation was like this:
.html file:
<head>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>
<body>
<div class="lc-form-holder">
<form action="#" method="post">
[...]
<span onclick="myFunction();">NEXT</span>
</form>
</div>
</body>
and .js file:
$(document).ready(function() {
function myFunction() {
console.log('click click');
}
});
When I clicked on <span> I got an error Uncaught ReferenceError: myFuncion is not defined.
But when I do this in .js file (no document.ready):
function myFunction() {
console.log('click click');
}
Everything work just fine.
I don't know is this helpful but I wanna share it if someone check this question in future.
Try this first
<body>
<span onClick="alert('1');"></span>
if the above code works then there must exists others javascript which are actually got error prior to execute your code.
<span onClick="view_more('1')">Test</span>
Add text and then click on text
Working at my end
This is my code --
<html>
<head>
<script>
function view_more(pg_no){
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="view_more('1')">gfgf</span>
</body>
</html>
EDIT
try using this code --
<html>
<head>
<script type="text/javascript">
function view_more(pg_no)
{
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="javascript:view_more('1');">gfgf</span>
</body>
</html>
I have a page that contains a dynamically loaded <iframe>. This iframe contains a <form>.
When the user submits the <form>, a new page is loaded within the <iframe> saying Thanks.
Instead of using a second page, i want the parent page to show the Thanks message.
So basically i am in my <iframe>, and i want to call a function on the parent frame.
How can i do that ?
From an iframe, it is possible to call a function declared on the parent window using window.top.functionName(). But for this to work, both pages should be hosted on the same domain. They are subject to Same Origin Policy. That means if you want to test this example, you should use a server (wamp, xampp, etc..).
page.html (updated)
<html>
<head>
<title>Page 1</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
window.foo = function(){
alert('page 1 is executing this code');
}
$(function(){
$('body').append('<iframe src="iframeContent.html"></iframe>');
});
</script>
</head>
<body></body>
</html>
iframeContent.html
<html>
<head>
<title>Page 2</title>
</head>
<body>
i am the iframe. This is my button.
<button onclick="javascript:window.top.foo()">click me</button>
</body>
</html>
I've done a little example for you.
Here is the main page (index.html) containing the iframe
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
<body>
<input type="hidden" id="infoFormPosted" value=0 />
<iframe src="./iframe.html"></iframe>
<div id="thanks" style="display:none;">
Thanks!
</div>
</body>
</html>
And here is the iframe (iframe.html):
<html>
<head>
<title>myIframe</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#infoForm").submit(function() {
//change the value of the top document input hidden to 1
$("#infoFormPosted", top.document).val(1);
});
// if the input hidden is set to 1
if($("#infoFormPosted", top.document).val() == 1){
// show the thanks div on the top document (not in the iframe)
$("#thanks", top.document).show();
}
});
</script>
</head>
<body>
<div id="anydiv">
<form id="infoForm" action="#" method="post">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>
EDIT : An alternative is to create a function inside the main page and call it in the iframe using parent.nameOfTheFunction()
The main page (index.html)
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
showThanks = function(){
$("#thanks").show();
};
</script>
</head>
<body>
<input type="hidden" id="infoFormPosted" value=0 />
<iframe src="./iframe.html"></iframe>
<div id="thanks" style="display:none;">
Thanks!
</div>
</body>
</html>
The iframe (iframe.html):
<html>
<head>
<title>myIframe</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#infoForm").submit(function() {
//change the value of the top document input hidden to 1
$("#infoFormPosted", top.document).val(1);
});
// if the input hidden is set to 1
if($("#infoFormPosted", top.document).val() == 1){
// call showThanks function from the main frame
parent.showThanks();
}
});
</script>
</head>
<body>
<div id="anydiv">
<form id="infoForm" action="#" method="post">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>