This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 2 years ago.
This is my javascript code(create.js):
var stuff = document.querySelector(".stuff");
var item = document.createElement('div');
item.className = 'item';
stuff.appendChild(item);
and this is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sound Create</title>
<script src="create.js"></script>
</head>
<body>
<div class="stuff">
</div>
</body>
</html>
When I go on Developer Tools, no code is added. Thank you!
When you call "getElementsByClassName", you will get a LIST of HTML elements, even if it contains only one element. So the right way is:
document.getElementsByClassName("stuff")[0];
Another way is using id. It's like , in js file, use document.getElementById('staff'). It returns the element directly, because id is always unique.
Related
This question already has answers here:
What does "use strict" do in JavaScript, and what is the reasoning behind it?
(30 answers)
Closed 2 years ago.
this code gives error which makes perfectly sense
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<script>
usestricr
</script>
</body>
</html>
but this doesn't why
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<script>
"usestricr"
</script>
</body>
</html>
please help i'am noob in this
So that triggering strict mode in JS engines that support it wouldn’t cause errors to be thrown in older engines, the code to trigger it is just a string.
Putting a different string there is still just a string which is still syntactically valid even if semantically nonsense.
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:
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);
});