change HTML element by ID

[Steven 99]

I found this JS snippet here on W3S when I was looking for a method to change prices (printed in HTML not as product attribute) in a WooCommerce store.
document.getElementById("id01"); element.innerHTML = "New Heading"; 

I changed it to: 
document.getElementById("440050").innerHTML = "€61,00";

The way I assign the id to the HTML is: <strong id="440050">PRICE</strong>

This worked - of course but every next script with another id I add doesn't work:

===

document.getElementById("440050").innerHTML = "€61,00";

document.getElementById("440039").innerHTML = "€42,00";

====

The second script (with id 440039) doesn't change anything, so what you see on the frontend is PRICE
So it seems to work only for one instance? What is the best way to do this?

[Sunamena]

So you see price, meaning it probably did not read the ID.

Try the following.
Reload the page by using control+F5. This reloads your stored Javascript code.

Then press F12 (Google chrome) and look for errors in the Console.

Let us know how this worked.

Edited November 28, 2020 by Sunamena

[dsonesuk]

General rule is you never start a id ref with a number.

[Steven 99]

On 11/28/2020 at 10:22 PM, Sunamena said:

So you see price, meaning it probably did not read the ID.

Try the following.
Reload the page by using control+F5. This reloads your stored Javascript code.

Then press F12 (Google chrome) and look for errors in the Console.

Let us know how this worked.

========Problem solved =======

What I found out is that if you separate each script on a per page basis then it works!

So I put this in functions.php of the WooCommerce backend: 

// price updates 2021 books
<script>
var element = document.getElementById("id440050").innerHTML = "€61,00";
var element = document.getElementById("id440039").innerHTML = "€42,00";
</script>

// price updates 2021 toys
<script>
var element = document.getElementById("id440051").innerHTML = "€91,00";
var element = document.getElementById("id440218").innerHTML = "€74,00";
</script>

 

And it just works!

[Steven 99]

On 11/29/2020 at 2:22 PM, dsonesuk said:

General rule is you never start a id ref with a number.

========Problem solved =======

Thanks for your advice! I made sure to put id (or sku) before the numbers....

What I found out is that if you separate each script on a per page basis then it works!
So I put this in functions.php of the WooCommerce backend: 

// price updates 2021 books
<script>
var element = document.getElementById("id440050").innerHTML = "€61,00";
var element = document.getElementById("id440039").innerHTML = "€42,00";
</script>

// price updates 2021 toys
<script>
var element = document.getElementById("id440051").innerHTML = "€91,00";
var element = document.getElementById("id440218").innerHTML = "€74,00";
</script>

 

And it just works!

[dsonesuk]

What is the reason for updating price?

Couldn't you give id for books and toys specifically 'book_idnnnnnn', 'toy_idnnnnnn'  then add the id ref into array of those you want to change, then loop through these changing the value during the loop.

[dsonesuk]

https://www.w3schools.com/code/tryit.asp?filename=GLQ0I6OYUXDA