Changing a div with javascript - javascript

I already fail at a seemingly basic task in javascript - changing a div's content by a script. Please help me understand where I am going wrong. Here is a minimal example that's not working for me:
<!DOCTYPE html>
<html>
<head>
<script>
document.getElementById('id').innerHTML = "test";
</script>
</head>
<body>
<div id="id" >blub</div>
</body>
</html>

The Problem with you code it that the JavaScript code is executed before the div part is loaded fully. To fix this change you code to:
<!DOCTYPE html>
<html>
<head>
<script>
function changeDiv()
{
document.getElementById('id').innerHTML = "test";
}
</script>
</head>
<body onload="changeDiv();">
<div id="id" >blub</div>
</body>
</html>
The onload event will only fire when the html is fully loaded.

HTML files load starting at the top to the bottom of the html.
In your example, the javascript executes before the <body> tag exists in the DOM.
Moving the javascript to below the relevant html makes it work as you would expect.
Another option would be to keep the script inside the <head> but delay it from executing until the DOM is loaded
window.onload = function() {
document.getElementById('id').innerHTML = "test";
};
https://developer.mozilla.org/en/docs/Web/API/GlobalEventHandlers/onload
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="id" >blub</div>
<script>
document.getElementById('id').innerHTML = "test";
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="id" >blub</div>
<script>
document.getElementById('id').innerHTML = "test";
</script>
</body>
</html>
put your script after the div.

You need to use window.onload to call your code when html is fully loaded:
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
document.getElementById('id').innerHTML = "test";
};
</script>
</head>
<body>
<div id="id" >blub</div>
</body>
</html>

Your Dom is no not loaded.. Place your script tag at the end before

Just add the script tag before closing the body. It'll work.

You have to write the Javascript after the div-Tag. First the DOM needs to be loaded and after you can change the content inside the DIV.
Place your Javascript before the closing-body Tag

Related

call parital html page using jQuery

I want to call a partial html page using jquery. I have seen this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="lib/jquery-3.1.0.min.js"></script>
<script type="text/javascript"> $('#result').load('Ajax/test.html'); </script>
<title>Home</title>
</head>
<body>
<div id="result"></div>
</body>
</html>
and in the path Ajax/test.html i have this test.html:
<h1>Hey World</h1>
The problem is it does not load the Hey World into the main page. Also, there is no error in console.
What is the problem?
As with $('#result'), jQuery is unable to find the element as DOM is not ready hence jQueryObject.load method is never invoked.
Wrap your script in $(document).ready or Place your <script> as last-child of <body>(Just before closing body tag(</body>))
There are also DOMContentLoad or window.onload events which makes sure that DOM is loaded but IMO, placing <script> just before </body> is easier option.
<div id="result"></div>
<script>
$('#result').load('test.html');
</script>
You are trying to append to an element that yet does not exists.
Try adding your code in a $(document).ready(), and just before the </body> closing tag.
Like this:
<script>
$(document).ready(function(){
$('#result').load('Ajax/test.html');
});
</script>
</body>
Try changing your <script> tag to include a document.ready:
<script type="text/javascript">
$(document).ready(function () {
$('#result').load('Ajax/test.html');
});
</script>

setAttribute in JavaScript not working with oraSearch

I'm working in ORMB and have an input element like this
<input id="charVal" class="oraInput" oraField="charVal">
I want to dynamically add an oraSearch attribute using Javascript but it's not working
document.getElementById("charVal").setAttribute("oraSearch","CM_SR_CHAR");
Though if I try with other attributes, it's working fine. Also if I add the oraSearch statically like below, then also it's working
<input id="charVal" class="oraInput" oraField="charVal" oraSearch="CM_SR_CHAR">
I believe the problem is in the DOM path for the JavaScript code.
I tried to put the script from the <head> and it didn't work, like this:
<!DOCTYPE html>
<html>
<head>
<script>
document.getElementById("charVal").setAttribute("oraSearch","CM_SR_CHAR");
</script>
</head>
<body>
<input id="charVal" class="oraInput">
</body>
</html>
But, if you put it in the body, it works fine:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input id="charVal" class="oraInput">
<script>
document.getElementById("charVal").setAttribute("oraSearch","CM_SR_CHAR");
console.log(document.getElementById("charVal"));
</script>
</body>
</html>
Note: if you are taken the script from another file put the <script></script> inside the <body>

Calling a java script function inside HTML

I am trying to print something inside my html from a java script. I did this but it don't work:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>I am trying to print <script>go();</script></p>
<script>
function go() {
document.write("Hello World!");
}
</script>
</body>
</html>
You're function hasn't been defined yet in the example you are posting, so call to go effectively does nothing, change the ordering of your script tag
<!DOCTYPE html>
<html>
<head>
<script>
function go() {
document.write("Hello World!");
}
</script>
</head>
<body>
<p>I am trying to print <script>go();</script></p>
</body>
</html>

JS commands not recognized in an external file

I'm tring to use the command innerHTML to change the text of my HTML code. it works if I put it at the HTML file, but not if I put in an external one.
The one that works:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="Monkey">Monkey</p>
<script>
document.querySelector("#Monkey").innerHTML="NoMoreMonkeys";
</script>
</body>
</html
Output: NoMoreMonkeys
The one that doesn't:
<!DOCTYPE html>
<html>
<head>
<script src="hello.js"></script>
</head>
<body>
<p id="Monkey">Monkey</p>
</body>
</html>
File "hello.js" :
document.querySelector("#Monkey").innerHTML="NoMoreMonkeys";
Output: Monkey
Can someone help me?
You should include js before end of body,
because if js run before DOM ready, #Monkey did not exist.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="Monkey">Monkey</p>
<script src="hello.js"></script>
</body>
</html>
Or use jquery document ready:
$(document).ready(function() {
document.querySelector("#Monkey").innerHTML="NoMoreMonkeys";
});
The solution is to manipulate the page, when it is safe to do.
For that add jQuery to your page and let your JS code execute, when thh document is ready.
$( document ).ready(function() {
document.querySelector("#Monkey").innerHTML="NoMoreMonkeys";
});
or select element with jQuery as well:
$( document ).ready(function() {
$( "#Monkey" ).html("NoMoreMonkeys");
});

JavaScript scroll to y position

does anybody know why scrolling of scrollbar to y position does not work? Very simple code below. In JSFiddle it works fine. I don't see any reason why it should not work. Scroll bar appears but still at the top :-(
<script>
window.scrollTo(50,100);
</script>
<body>
<div style="width:200px; height:1500px;background-color:blue;">
hello
</div>
</body>
You need to put the script block below the div and attach the scrollTo to the windows onload event for this to scroll down on page load.
Try this:
<body>
<div id="div1" style="width:200px; height:1500px;background-color:blue;">
hello
</div>
<script>
window.onload = function() { window.scrollTo(50,100); };
</script>
</body>
Script must be executed after all DOM elements are created so use window.onload method for javascript and $(document).ready() for jQuery
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
window.scrollTo(50, 100);
}
</script>
</head>
<body>
<div style="width:200px; height:1500px;background-color:blue;">
hello
</div>
</body>
</html>

Categories