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>
Related
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>
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:
Javascript can't find element by id? [duplicate]
(5 answers)
Closed 3 years ago.
I am creating a very simple HTML file and I am trying to link it to a JavaScript file so that the text changes when I click on it.
I have copied it almost entirely from W3 and it works when I place the javascript code within the HTML script tags, but when I try to source it using the script tags (see the first example below) I am not able to get the JavaScript file to link to the HTML.
Any help you can give me is appreciated. I am currently using Visual Studio Code to do this if that gives any hints as to what I am doing wrong.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TextChange</title>
<script src="js/script.js"></script>
</head>
<body>
<p>This example uses the HTML DOM to assign an "onclick" event to a p element.</p>
<p id="demo">Click me.</p>
</body>
</html>
JavaScript
document.getElementById("demo").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
Alternate HTML that works
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TextChange</title>
</head>
<body>
<p>This example uses the HTML DOM to assign an "onclick" event to a p element.</p>
<p id="demo">Click me.</p>
<script>
document.getElementById("demo").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
</script>
</body>
</html>
When I render the HTML and view the source and click on the .js extension, I am able to view the javascript file. Despite this, the text that I want to change when I click on it does not change if I click on it.
Your JS file is included before the element, so getElementById() returns null.
Move it after the element, or make it wait for the document's loaded event.
Your script tag must be on the bottom of your html code (before the closure of <body> tag) so your javascript can use and detect the different DOM elements after they get rendered :
<html>
<body>
<!-- your code here -->
<script src="js/script.js"></script>
</body>
</html>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 years ago.
For your information, this is not a duplicate - my question was not solved by similar questions .
I am trying to log this element:
<p id="one">Test</p>
to the console with JavaScript:
var one = document.getElementById("one");
console.log(one);
However, this returns null for the console.log(one); line, and I can't figure out the reason. Where is the null value coming from, and how do I make it reference the <p id="one">Test</p> element?
EDIT: Full HTML code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A tester</title>
<script src="index.js"></script>
</head>
<body>
<p id="one">One</p>
</body>
</html>
Probably you are accessing the element before the DOM is ready, Try with DOMContentLoaded:
document.addEventListener("DOMContentLoaded", function(event) {
var one = document.getElementById("one");
console.log(one);
})
<p id="one">Test</p>
It is working fine :)
var one = document.getElementById("one");
console.log(one);
<p id="one">Test</p>
It works fine.
<html lang="en">
<head>
<meta charset="utf-8">
<title>A tester</title>
<script src="index.js"></script>
<script>
function getOne()
{
var one = document.getElementById("one");
console.log(one);
}
</script>
</head>
<body onload="getOne()">
<p id="one">One</p>
</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);
});