Question
Here's the code that I have, where I need to update the "Charge Amount" to something else using JavaScript I've tried various things but haven't been successful. There's no id associate to the ul or the li items. What's the best way to update this?
<ul class="properties">
<li>
<label>
<b> Charge Amount </b>
</label>
</li>
</ul>
Solution
You can use the querySelector() method.
let b = document.querySelector('ul.properties li:nth-child(1) b');
b.textContent = 'Updated Amount';<ul class="properties">
<li>
<label>
<b> Charge Amount </b>
</label>
</li>
<li>
<label>
<b> Some other Amount </b>
</label>
</li>
</ul>Solution
You should learn more about CSS selectors. A CSS selector for this might be
ul.properties li
or just
.properties li
The basics of CSS Selectors really isn't that hard to learn, and it will help you moving forward.
Solution
You can use "querySelector" to change the first value. if you want to change multiple b tag use "querySelectorAll" which is an array. I recommend you to learn about Dom for further understanding and efficient use.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul class="properties">
<li>
<label>
<b>Charge Amount</b>
</label>
</li>
</ul>
<script>
const bTag = document.querySelector('b')
bTag.innerText = 'Hello world'
</script>
</body>
</html>Solution
(
HTMLElement.textContent) updated the text Content but still didn't update the actual text appearing on the screen
By title do you mean the textbox that appears on hover? Edit your question to provide more detail if this answer doesn't do what you want
To build on Chrwahl's answer, you can use the querySelector() method in combination with the HTMLElement.title DOM property to change the title that appears on hover:
let b = document.querySelector('ul.properties li:nth-child(1) b');
b.textContent = 'Updated Amount';
b.title = 'Updated Amount';<ul class="properties">
<li>
<label>
<b> Charge Amount </b>
</label>
</li>
<li>
<label>
<b> Some other Amount </b>
</label>
</li>
</ul>Solution
First of all, always give id if you want to select specific element and make changes to them, that's a good practice. Otherwise you can use css selectors also with querySelector.
I have added the code to update the title using setTimeout() function just to illustrate the use so you can see it updating. setTimeout() will update the title after 5 seconds.
If you want to do it on the click of a button check the comments in the below code. to use it inside a function just add the code - let title = document.querySelector("#title"); title.innerHTML="Updated" inside your function.
You can also use title.textContent="Updated" instead of title.innerHTML="Updated"
Also, make sure the javascript is added to the end of the body or is set to run only after the entire body is rendered, to avoid "element not found error.
let title = document.querySelector("#title");
setTimeout(()=>{title.innerHTML="Updated"},5000);
//Code to update the title using a button Click
//let btn=document.querySelector("#btnUpdateTitle");
//btn.addEventListener('click',()=>{title.innerHTML="Updated"});<ul class="properties">
<li>
<label>
<b id="title"> Charge Amount </b>
</label>
</li>
</ul>
<!-- Code to update the title using a button Click -->
<!-- <button id="btnUpdateTitle">Update Title</button> -->Code for updating the title without giving id to the tag.
let title = document.querySelector("li:nth-Child(2)>label>b");
setTimeout(()=>{title.innerHTML="Updated"},5000);
//Code to update the title using a button Click
//let btn=document.querySelector("li:nth-Child(2)>lable>b");
//btn.addEventListener('click',()=>{title.innerHTML="Updated"});<ul class="properties">
<li>
<label>
<b id="title"> Charge Amount 1</b>
</label>
</li>
<li>
<label>
<b id="title"> Charge Amount 2 </b>
</label>
</li>
<li>
<label>
<b id="title"> Charge Amount 3 </b>
</label>
</li>
</ul>
<!-- Code to update the title using a button Click -->
<!-- <button id="btnUpdateTitle">Update Title</button> -->