This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
I write some Javascript code using jQuery that should insert a symbol into one div when you click on another div. Nothing happens.
I used some code to check if jQuery loaded properly and it is.
HTML:
<html>
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<!--<script src="jquery-3.4.1.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="keyboard.js"></script>
<title>Keyboard Test</title>
</head>
<body>
<div class="field"></div>
<div class="key" id="a key"></div>
</body>
</html>
Javascript:
$(".key").click(function(event) {
$(".field").text="a";
alarm("asdfsdf");
});
No error messages.
Also tried this:
$(".key").on("click",function() {
alarm("asdfsdf");
$(".field").text="a";
});
wrap your code in document.ready. and you are suing jquery so it shoud be text() function.
$(document).ready(function(){
$(".key").on("click",function() {
$(".field").text("a");
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field"></div>
<div class="key" id="a key">key</div>
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Where should I put <script> tags in HTML markup?
(21 answers)
Closed 3 years ago.
I am trying to run a program but when I put the javascript getElementById method in header section then the code is not executed but when I put it in body section below my html then it gets executed. Please tell me the reason
<html>
<head>
<script type="text/javascript">
document.getElementById("addition").innerHTML= 5+6;
</script>
</head>
<body>
<span id="demo"> 5+6 =</span><span id="addition"></span>
When you add a Javascript code in the header, it runs before the body. So, in that moment, there is no element with id "addition" yet.
To keep that simple, you should add your script in the bottom of your tag.
<html>
<head>
<title>Hello World</title>
</head>
<body>
<span id="demo"> 5+6 =</span><span id="addition"></span>
<script type="text/javascript">
document.getElementById("addition").innerHTML= 5+6;
</script>
</body></html>
Another option is putting your code in a function and calling that function into the onLoad attribute on the body tag.
<html>
<head>
<title>Hello World</title>
<script type="text/javascript">
function letsDoIt(){
document.getElementById("addition").innerHTML= 5+6;
}
</script>
</head>
<body onload="letsDoIt()">
<span id="demo"> 5+6 =</span><span id="addition"></span>
</body></html>
More info about events order can be found here https://javascript.info/onload-ondomcontentloaded.
This question already has answers here:
Why is document.GetElementById returning null [duplicate]
(6 answers)
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 years ago.
Does anyone know why document.getElementById("closebtn"); returns null? I have tried console.logging it, and i just get null. I am using node.js and Electron
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css" />
<script>
console.log(document.getElementById("closebtn"));</script>
</head>
<body>
<div id="menubar">
<button id="closebtn" onclick=""></button>
</div>
</body>
</html>
This is because your script is running before the DOM is fully loaded. You can either place the script at the bottom of the body or wrap your code with DOMContentLoaded. This will ensure that code placed inside will only be executed once the DOM is fully loaded.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css" />
<script>
document.addEventListener("DOMContentLoaded", function(event) {
console.log(document.getElementById("closebtn"));
});
</script>
</head>
<body>
<div id="menubar">
<button id="closebtn" onclick=""></button>
</div>
</body>
</html>
This question already has answers here:
JavaScript and getElementById for multiple elements with the same ID
(13 answers)
Closed 5 years ago.
I will be working on a table and wanted to change one column with different img src icon.
Here's my sample code:
Html
<img src="" id="mytext">
<img src="" id="mytext">
<img src="" id="mytext">
Javascript
var test = "https://www.datatables.net/media/images/nav-dt.png";
document.getElementById("mytext").src = test;
When i run this it only changes the src of the first instance.
How can i change them all?
You can't use multiple sample id's on sample page, better to use class instead id.
You can see example here: Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
div.mytext{
color:red;
}
</style>
<script>
$(document).ready(function(){
$("#btn").click(function() {
$("div").addClass('mytext');
});
});
</script>
</head>
<body>
<button id="btn">Change All Divs Class</button>
<div id="content1">Hi</div>
<div id="content2">Hi</div>
<div id="content3">Hi</div>
</body>
</html>
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 8 years ago.
I try to insert a button with .html(...) and then he should execute some code.
But it doesn´t work, the button (inserted with .html(...)) doesn´t response after clicking him.. i have no idea what i can do, i also asked google for help, but i found nothing.. i hope somebody can help me :)
Here is my html:
<html>
<head>
<title>Multiplie Files</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="js/libs/jquery/jquery.js"></script>
<script type="text/javascript" src="js/files.js"></script>
</head>
<body>
<button id="button">test</button>
<div id="field"></div>
</body>
And here is my javascript:
$('document').ready(function() {
$('#click').click(function() {
alert(true);
});
$('#button').click(function(){
$('#field').html('<input value="Click" type="Button" id="click"/>');
//document.getElementById("field").innerHTML = '<input value="Click" type="Button" id="click"/>';
});
});
I tried with jquery .html and with normal javascript .innerHTML.. nothing works..
Thanks for every reply! :)
Try to use event-delegation on dynamically created elements,
$('#field').on('click','#click',function() {
alert(true);
});
This question already has answers here:
How to add onload event to a div element
(26 answers)
Closed 8 years ago.
I'm trying to get a really simple to alert() to pop up as soon as a div loads. Unfortunately it is not working, and I can't figure out why.
Here is the code:
<html>
<head>
<title>My Site</title>
<link rel="stylesheet" type="text/css" href="style2.css">
<script type="text/javascript" src="js/jquery_1.4.2.js"></script>
<script type="text/javascript" src="js/alertjs.js"></script>
</head>
<body>
<div id="background_logo" onload="pop_alert();">
<img src="mysiteLogo.png">
</div>
<div id="signup">
<p id="instruction"> Get on board! </br> Enter your email to receive updates:</p>
<script type="text/javascript" src="js/form-validation.js"></script>
</div>
</body>
</html>
And the JavaScript is just this:
function pop_alert(){
alert("This is an alert");
}
It cannot be used for div tags. This is the following list it can be used on:
<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">,
<link>, <script>, <style>
You can't attach onload to a div. Try putting it in the <body>:
<body onload="pop_alert();">
You can't use onload on a div. The best way to do this is to add a script element after the div to run the function.
<html>
<head>
<title>My Site</title>
<link rel="stylesheet" type="text/css" href="style2.css">
<script type="text/javascript" src="js/jquery_1.4.2.js"></script>
<script type="text/javascript" src="js/alertjs.js"></script>
</head>
<body>
<div id="background_logo">
<img src="mysiteLogo.png">
</div>
<script>
pop_alert();
</script>
<div id="signup">
<p id="instruction"> Get on board! </br> Enter your email to receive updates:</p>
<script type="text/javascript" src="js/form-validation.js"></script>
</div>
</body>
</html>
See How to add onload event to a div element?
OnLoad is used on body or windows not the div etc. If you want then use event handler to alert the pop up for example assign some id and use that to bind the event.
That is because onload is a document(body) event.
demo: http://jsbin.com/benosofo/1/
The onload event can only be used on the document(body) itself, frames, images, and scripts. In other words, it can be attached to only body and/or each external resource. The div is not an external resource and it's loaded as part of the body, so the onload event doesn't apply there.
from: https://stackoverflow.com/a/4057251/2213706
onload is fired when the browser has loaded all content (including images, script files, CSS files, etc.)
http://www.w3schools.com/jsref/event_onload.asp
Poor source I know.