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?
<code><ul class="properties">
<li>
<label>
<b> Charge Amount </b>
</label>
</li>
</ul>
</code>
<code><ul class="properties">
<li>
<label>
<b> Charge Amount </b>
</label>
</li>
</ul>
</code>
<ul class="properties">
<li>
<label>
<b> Charge Amount </b>
</label>
</li>
</ul>
1
You should learn more about CSS selectors. A CSS selector for this might be
<code>ul.properties li
</code>
<code>ul.properties li
</code>
ul.properties li
or just
<code>.properties li
</code>
<code>.properties li
</code>
.properties li
The basics of CSS Selectors really isn’t that hard to learn, and it will help you moving forward.
1
You can use the querySelector() method.
<code>let b = document.querySelector('ul.properties li:nth-child(1) b');
b.textContent = 'Updated Amount';</code>
<code>let b = document.querySelector('ul.properties li:nth-child(1) b');
b.textContent = 'Updated Amount';</code>
let b = document.querySelector('ul.properties li:nth-child(1) b');
b.textContent = 'Updated Amount';
<code><ul class="properties">
<li>
<label>
<b> Charge Amount </b>
</label>
</li>
<li>
<label>
<b> Some other Amount </b>
</label>
</li>
</ul></code>
<code><ul class="properties">
<li>
<label>
<b> Charge Amount </b>
</label>
</li>
<li>
<label>
<b> Some other Amount </b>
</label>
</li>
</ul></code>
<ul class="properties">
<li>
<label>
<b> Charge Amount </b>
</label>
</li>
<li>
<label>
<b> Some other Amount </b>
</label>
</li>
</ul>
1