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>
Related
I'm developing an extension for Microsoft Edge and have learned from the docs here https://learn.microsoft.com/en-us/microsoft-edge/extensions/guides/creating-an-extension#writing-a-more-complex-extension that I can use Javascript for data manipulation.
For some reason though, when I try to modify a DOM element like this:
<!DOCTYPE html>
<html>
<body>
<p></p>
<script type='text/javascript'>
document.getElementsByTagName('P')[0].innerHTML = 'something';
</script>
</body>
</html>
I get the desired result in any HTML / JAVASCRIPT interpreter but when I try to test it out in the extension the DOM manipulation isn't working. The p element isn't populated with 'something'. The manifest.json file is included in the extension folder I'm just not including it here as it's not relevant to the question.
How should I go about this ?
Update:
window.html:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<link rel='stylesheet' href='window.css'>
</head>
<body>
<div><p></p></div>
<script src="window.js"></script>
</body>
</html>
window.js:
window.onload() {
document.getElementsByTagName('P')[0].innerHTML = 'hakuna matata';
};
You should import the JavaScript function using <script> tag like below:
In myfunction.js file of js folder:
document.getElementsByTagName('p')[0].innerHTML = 'something';
In html file:
<!DOCTYPE html>
<html>
<body>
<p></p>
<script src="js/myfunction.js"></script>
</body>
</html>
I tested it in Edge extension: If we use the JavaScript function directly in the html page then it doesn't work. If we use a link to the js file then it works.
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
I am having a lot of trouble trying to add text to an existing <p> element using jQuery. I have tried many different methods but nothing has worked so far. Here is the code for the html file:
<!doctype html>
<html>
<head>
<script src="index1.js"></script>
<title>Drinking Game</title>
</head>
<body>
<button id="creategame" >Create game</button>
<p id="demo">Hello</p>
<script>
$(document).ready(function(){
$('#creategame').click(function(){
$("#demo").append("Test");
});
});
</script>
</body>
</html>
My guess is you don't load jQuery file, and the console has
$ is not defined
error. Simply, add
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
to <head> tag
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="index1.js"></script>
<title>Drinking Game</title>
</head>
You are missing the jQuery file. Add this code <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> to your file above the <script src="index1.js"></script>. Make sure it's above it because if it's not then you can't call the jQuery functions in the your index1.js file.
try using the .html() function:
$("#demo").html("Test");
The following worked for me.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id='createGame' class="btn btn-default">Click</button>
<p id="demo">Hello</p>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>
$(document).ready(function() {
$("#createGame").click(function(){
$("#demo").append("Test");
});
});
</script>
</body>
</html>
You need to reference jQuery in a <script> tag somewhere.
Hi I'm very new to writing code in html and javascript and am wondering why my script tags aren't producing any output when I open my html file. I've tried console.log, document.write, alert, etc, and none of them seem to be appearing in my code. Nevermind the content of the code, its not at all important.
picture of my code
Dont use write but alert
<!DOCTYPE HTML>
<html>
<head>
<title>Everything Potatoes</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Heelo Moto</h1>
<script>
alert("Hello mojo");
</script>
</body>
</html>
I want all the code inside an pre-tag but innerHTML or jquery : html() doesnt return all the code. Some things where cut off.
Like doctype und head body tags etc.
<pre id="pre">
<!DOCTYPE html>
<html >
<head></head>
<body>
<div>asdfds</div>
</body>
</html>
</pre>
When i alert the innerHTML of the #pre object
it only alerts the div
http://jsfiddle.net/6o8xjtaq/1/
Is there any other possibility to solve this?
If you really want to do it, use a script
<script id="pre" type="text/template">
<!DOCTYPE html>
<html >
<head></head>
<body>
<div>asdfds</div>
</body>
</html>
</script>
$('#pre').text();
Replace < and > with < and > so you can get it as wanted, yet not invalid html.
<pre id="pre">
<!DOCTYPE html>
<html >
<head></head>
<body>
<div>asdfds</div>
</body>
</html>
</pre>