I Don't khow why my console is telling me that the result is undefined.I am learning DOM and found the problem on my first code which i don't understand
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
let head = document.getElementsByClassName(".main");
console.log(head.textContent);
let tail = document.getElementsByTagName("p");
console.log(tail.textContent);
</script>
</head>
<body>
<div class="main">
<p>hello</p>
</div>
</body>
</html>
The elements doesn´t exist when the script runs in head. Move the script to after the elements
Change from .main to main in getElementsByClassName
getElementsByClassName returns a list so add [0] to getElementsByClassName("main") to get the first element
<div class="main">
<p>hello</p>
</div>
<script>
let head = document.getElementsByClassName("main")[0];
console.log(head.textContent);
let tail = document.getElementsByTagName("p")[0];
console.log(tail.textContent);
</script>
Move your script to the body
document.getElementsByClassName returns a collection of HTML elements, not a single element
with document.getElementsByClassName you should pass main, not .main
the textContent of the div with class main is probably not what you expect
to get an single element by its class name or its tag name, you can also use querySelector which is more simple (but slower)
Here is a working version :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="main">
<p>hello</p>
</div>
<script>
let head = document.querySelector(".main");
console.log(head.textContent);
let tail = document.querySelector("p");
console.log(tail.textContent);
</script>
</body>
</html>
Related
why doesn't it work? i just want to add a paragraph to a div. Guys, why doesn't it work? i just want to add a paragraph to a div.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="pobieranko.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="klasa">lalal</div>
</body>
</html>
const divek = document.querySelector(".klasa")
const paragraf = document.createElement("p")
paragraf.textContent = "paragrafik"
divek.appendChild (paragraf);
It appears you did not add a script tag to the page as so:
<script>
const divek = document.querySelector(".klasa")
const paragraf = document.createElement("p")
paragraf.textContent = "paragrafik"
divek.appendChild (paragraf);
</script>
I have a html file (converted from docx) and it does not have any class names or ids. How can I style it using JS? For example, if I need to change the color of the heading for the below file HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="./script.js"></script>
<title>Document</title>
</head>
<body>
<h1>This is the heading</h1>
<p>Hello, my name is xyz and this is a para</p>
</body>
</html>
This is what I tried, but document.getElementByTagName() does not return the element like document.getElementById()
console.log('hello world');
Heading = document.getElementsByTagName('h1');
console.log(Heading);
Heading.style.color = 'blue';
Edit:
I tried the below code, but it returns undefined
console.log('hello world');
Heading = document.getElementsByTagName('h1')[0];
console.log(Heading);
Heading.style.color = 'blue';
You can try document.querySelector() as well.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>This is the heading</h1>
<p>Hello, my name is xyz and this is a para</p>
</body>
<script type="text/javascript">
const header = document.querySelector('h1');
console.log(header);
header.style.color = 'blue';
</script>
</html>
One other thing to note is - we need to wait for the page to load, otherwise your javascript code runs first and returns undefined.
You can ensure javascript to run after page load using any of the below ways -
Add an event listener – document.addEventListener("load", FUNCTION);
Add onload to the body tag – <body onload="FUNCTION()">
Defer the script – <script src="SCRIPT.js" defer>
Lastly, place the script at the very bottom of the page – Although this is not quite “after page load”.
The issue in your code is that getElementsByTagName returns an array, but you're using is as if it were a single element.
Try this:
window.addEventListener('load', () => {
const heading = document.querySelector('h1');
heading.style.color = 'blue';
});
<h1>This is the heading</h1>
<p>Hello, my name is xyz and this is a para</p>
Please update your code like this. you imported the script before html.
There are two solutions. first you have to import script after html or use
window.addEventListener
window.addEventListener('load', () => {
const heading = document.querySelector('h1');
heading.style.color = 'blue';
});
<h1>This is the heading</h1>
<p>Hello, my name is xyz and this is a para</p>
I'm using cheerio.js to parse some HTML documents, but I'm facing certain problems.
The thing is the HTML file I am using contains the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
</title>
</head>
<body>
<p>Text 1</p>
<p>Text 2</p>
</body>
</html>
Now, I also have a javascript array of Items like this:
var items = ["<h2>orange</h2>", "<h2>mango</h2>"];
What I want to do is simply replace each P tags with the respective item in the items array, i.e something to this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
</title>
</head>
<body>
<h2>orange</h2>
<h2>mango</h2>
</body>
</html>
What I tried so far:
var selections = $("p");
for ( let index = 0; index < selections.length; index++ ) {
selections[index].replaceWith(items[index])
}
But it says that function replaceWith() is not valid
Solution:
using the each method, one can easily process particular elements
solving the above problem:
var items = ["<h2>orange</h2>", "<h2>mango</h2>"];
$("p").each((index, element) => $(element).replaceWith(items[index]))
Basically the each method will invoke a callback function where element is the selector of that particular element, and index is the position of the item in that selection.
For more ref, check: https://cheerio.js.org/classes/Cheerio.html#each
This question already has answers here:
How do I change the text of a span element using JavaScript?
(18 answers)
Closed 3 years ago.
i have no idea about this error, because i just checked all of other topics and didn't get result.
let demo = document.getElementById("#demo");
demo.innerText("yo");
<!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>Pract</title>
</head>
<body>
<script src="javascript.js"></script>
<p id="demo"></p>
</body>
</html>
//currently your id is demo
let demo = document.getElementById("demo");
demo.innerText="yo";
///if your id is #demo use this
let demo2 = document.getElementById("#demo");
demo2.innerText="yolo";
<!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>Pract</title>
</head>
<body>
<script src="javascript.js"></script>
<p id="demo"></p>
<p id="#demo"></p>
</body>
</html>
As your id is demo, not #demo, you need to write your code like this:
let demo = document.getElementById("demo"); // don't use #
demo.innerText = "yo"; // Also change innerText like this
And for changing innerText property have a look at docs. innerText is not a method.
I am trying to display data randomly in my file 'question.json' on HTML but somehow there's nothing happened. I'm starting to learn JavaScript and still don't know how to fix. Here's my code:
<!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>Answer Something</title>
<script>
$.getJSON('question.json', function(data){
console.log(data)
let questionList = data[Math.floor(Math.random()* data.length)];
let display = document.getElementById('question');
display.innerHTML = questionList;
});
</script>
</head>
<body>
<nav>
Quick Ask
Quick Answers
</nav>
<h1 id="question"></h1>
<div>
<button>Sai/Không/Trái</button>
<button>Đúng/Có/Phải</button>
</div><br>
<div>
<button>Kết quả vote</button>
<button>Câu hỏi khác</button>
</div>
</body>
</html>