Jump to content

change HTML element by ID


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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...