the following code should display the word Test...but instead the message TypeError: document.getElementById(...) is displayed.
I can't figure out why:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testtree</title>
</head>
<script>
document.getElementById("kaptree").innerHTML="TEST";
</script>
<body>
<div id="kaptree"></div>
</body>
</html>
Can anyone help me to open my eyes?
You're trying to access the kaptree element before it's loaded. Run your script after loading the DOM.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testtree</title>
</head>
<body>
<div id="kaptree"></div>
<script>
document.getElementById("kaptree").innerHTML = "TEST";
</script>
</body>
</html>
You should place your scripts after your html elements.
The element with the id "kaptree" is not available at this place. Move the script block below the body and it works.
Otherwise you have to wait for the document-ready state.
If you move the body section with the DIV setup to the top it works.
It runs sequentially so it can't assign the inner.html before the DIV is defined
Because your JS code is called before HTML.
Solution 1: Add JS right before </body> tag
Example:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testtree</title>
</head>
<body>
<div id="kaptree"></div>
</body>
<script>
document.getElementById("kaptree").innerHTML+="TEST";
</script>
</html>
Solution 2: Execute JS code inside window.load function
Example:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testtree</title>
<script>
window.onload = (function(){
document.getElementById("kaptree").innerHTML+="TEST";
});
</script>
</head>
<body>
<div id="kaptree"></div>
</body>
</html>
Your script is defined before the element that you try to reference.
Move it after :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testtree</title>
</head>
<body>
<div id="kaptree"></div>
</body>
<script>
document.getElementById("kaptree").innerHTML="TEST";
</script>
</html>
Or more readable and maintainable solution, use a function :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testtree</title>
<script>
function changeValue(){
document.getElementById('kaptree').innerHTML='TEST';
}
</script>
</head>
<body>
<div id="kaptree"></div>
<script>changeValue()</script>
</body>
</html>
A. Put the script inside head or body.
B. Either put the script after #kaptree, or add a document ready statement. You try to call something that isn't there yet.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testtree</title>
<script>
document.addEventListener('DOMContentLoaded', function(){
document.getElementById("kaptree").innerHTML="TEST";
}, false);
</script>
</head>
<body>
<div id="kaptree"></div>
</body>
</html>
Sometimes the solution is so simple.
I will put the function call into a:
$( document ).ready(function() {
});
Related
I have the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick="this.innerHTML=Date()">The time is?</button>
</body>
</html>
This is working fine.
But if I try to do the same thing by creating a separate JavaScript function, the code is not working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick=displayDate()>The time is?</button>
<script>
function displayDate(){
this.innerHTML=Date();
}
</script>
</body>
</html>
What is the reason for this?
Your this isn't refer to the button itself, when it is in the function scope. You can achieve to the desired result with many approaches.
1) You can pass this to the function as a parameter
function displayDate(context){
context.innerHTML = Date();
}
<button onclick="displayDate(this)">The time is?</button>
2) Using explicit bindings, like call or apply
function displayDate(){
this.innerHTML = Date();
}
<button onclick="displayDate.call(this)">The time is?</button>
You can try to do something like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="test" onclick=displayDate()>The time is?</button>
<script>
function displayDate(){
document.getElementById("test").innerHTML=Date();
}
</script>
</body>
</html>
I am trying to access this url via javascript to loaf a function in my js page:
url which contains a function
Then I will easily call the function and load some info.
I have the following code:
document.write('<SCRIPT LANGUAGE=JavaScript SRC="https://oasc12.247realmedia.com/RealMedia/ads/adstream_mjx.ads"></SCRIPT>');
OAS_RICH('UNKNOWN');
and my html is:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div id="mobile-ad">
<div class="sidebox advertisement">
<script type="text/javascript" src="/test/ads.js"></script>
</div>
</div>
Now my problem when I run it I get "Uncaught ReferenceError: OAS_RICH is not defined" which means that the function loading does not work via
Can anyone help why it is not working ? Am I missing anything?
why you are not putting your script balise directly in the head of the html page.
Then at the end of the body you add a script that call your function.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://oasc12.247realmedia.com/RealMedia/ads/adstream_mjx.ads"></script>
</head>
<body>
<div id="mobile-ad">
<div class="sidebox advertisement">
<script type="text/javascript" src="/test/ads.js"></script>
</div>
<script>
OAS_RICH('UNKNOWN');
</script>
</div>
</body>
You need this:
<script id="adscript"></script>
<script>
var adScript = document.getElementById("adscript");
adScript.addEventListener("load", function () {
OAS_RICH('UNKNOWN');
});
adScript.src = "https://oasc12.247realmedia.com/RealMedia/ads/adstream_mjx.ads";
</script>
I'am new to jQuery and cant seem to get it to work on my computer locally. I have saved the code from production jQuery 2.1.1 as jquery.min.js . But when I try to use jquery in projects it does not work. If I click on the jquery.min.js file that I saved, it gives up a Microsoft Script Error of "'default view' is null or not an object". I have been using this code to see if jQuery was installed. Any Ideas?
<!doctype html>
<html>
<head>
<title>Learning jQuery</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="jquery.min.js"></script>
</head>
<body>
<script>
if (typeof jQuery != "undefined") {
alert('jQuery is installed!');
</script>
</body>
</html>
You are missing the closing curly brace for your IF statement.
<!doctype html>
<html>
<head>
<title>Learning jQuery</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="jquery.min.js"></script>
</head>
<body>
<script>
if (typeof jQuery != "undefined") {
alert('jQuery is installed!');
} // <---- Right here!
</script>
</body>
</html>
try using jQuery from CDN to check the problem [source : http://jquery.com/download/]
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
other way to include it is like this : http://www.w3schools.com/jquery/jquery_install.asp
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Also there is closing braces missing in the code
<!doctype html>
<html>
<head>
<title>Learning jQuery</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="jquery.min.js"></script>
</head>
<body>
<script>
if (typeof jQuery != "undefined") {
alert('jQuery is installed!');
}//** <--------here is the missing closing braces **
</script>
</body>
</html>
I have made some chnages to your code ,please check it
1.closed the curly bracket.
2.changed the min file.
I think the major error is in syntax,because you have not closed the curly bracket of if conditions.
<!doctype html>
<html>
<head>
<title>Learning jQuery</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<script>
if (typeof jQuery != "undefined") {
alert('jQuery is installed!');
}
</script>
</body>
</html>
hi2all i write code which change the color of webpage when the user click the div
but doesn't work here is my code what's wrong with it
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<title>Untitled 1</title>
<script type="text/javascript">
var x=document.getElementById("m");
x.addEventListener("click",function{
document.body.style.backgroundColor = "red";
});
</script>
</head>
<body >
<div id="m">kfjgflg</div>
</body>
</html>
You should use something such as:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<title>Untitled 1</title>
</head>
<body>
<div id="m">kfjgflg</div>
<script type="text/javascript">
var x=document.getElementById("m");
x.addEventListener("click",function(){
document.body.style.backgroundColor = "red";
});
</script>
</body>
</html>
Because you have two problems in your original code:
Is missing a important () after the token "function".
The Javascript only recognizes a element after the page or element has ready. In this case, the element only is read to be recognized if your code has after the Javascript Codes that recognizes it.
The code above fixes this.
A important observation: In some IE's, this code can not work, because of the use of x.addEventListener, in this case, you can transform the anonymous function in a normal function (with a name) and listen with addEventListener (if available) and onclick (recommended for old IE's).
In this way,the code looks like:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<title>Untitled 1</title>
</head>
<body>
<div id="m">kfjgflg</div>
<script type="text/javascript">
function changeColor(){
document.body.style.backgroundColor = "red";
}
var x=document.getElementById("m");
if(!!x.addEventListener){ //If exists
x.addEventListener("click", changeColor);
}
x.onclick = changeColor; //It's a property, and ALWAYS can be set (but in some cases is not recognized)
</script>
</body>
</html>
Here is a working example with this code: http://jsfiddle.net/fjorgemota/qCXH3/
If you had opened your JavaScript error console it would have told you that you cannot access the property/method addEventListener of undefined.
You need to look for the element m after the DOM tree has been built. Either place into a function which gets called on DOMContentLoaded:
document.addEventListener('DOMContentLoaded', function() {
/* ... */
}, false);
or place your script at the end of your <body>.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var x=document.f1.tt1.value;
alert(x);
</script>
</head>
<body>
<form name="f1">
<input type="text" name="tt" value="jawadi" />
</form>
</form>
</body>
</html>
*the alert message does not appear , what is the problem?
thanks for your help :) :)
*
In addition to other answers your document may not be ready.
In your script tag have:
$(document).ready(function(){
var x = document.f1.tt.value;
})
A nicer way might be to give your input an id.
<input type="text" name="tt" id="myInput" value="jawadi" />
$(document).ready(function(){
var x = $("#myInput").val();
})
The problem with your script is you are trying to get the value of element which has not been created in the DOM yet. So you are getting the null value because it does not exist. One thing you can do is include the script at the bottom of the page so that it gets the value
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form name="f1">
<input type="text" name="tt" value="jawadi" />
</form>
</form>
</body>
<script type="text/javascript">
var x=document.f1.tt.value;//the name of textbox is tt
alert(x);
</script>
</html>
Second thing that you can try if you are comfortable with jquery is use .ready function, so it will get the value after page load.
$(document).ready(function(){
var x=document.f1.tt.value;//the name of textbox is tt
alert(x);
});
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form name="f1">
<input type="text" name="tt" value="jawadi" />
</form>
</form>
<script type="text/javascript">
var x=document.f1.tt.value;
alert(x);
</script>
</body>
</html>
because javacript not found f1 try this
Replace
var x=document.f1.tt1.value;
with
var x=document.f1.tt.value;
Modified code: DEMO
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function alertX(){
var x=document.f1.tt.value;
alert(x);
}
</script>
</head>
<body onload='alertX();'><!-- call alertX on body load-->
<form name="f1">
<input type="text" name="tt" value="jawadi" />
</form>
</body>
</html>