Jump to content

change HTML element by ID


Steven 99
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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 by Sunamena
Link to comment
Share on other sites

  • 2 weeks later...
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!

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...