0

I'm not sure where to start here. The productName p tag dynamically changes based on a parameter in the URL.

<p id="productName">67</p>

How would I use javascript to dynamcally insert the 67 value into a img src attribute:

<img id="dynamicImg" src="https://cdn2.hubpot.net/hubf/45645/asset-diecu/sampleImage/67_a.png"/>
ember Wolf
  • 13
  • 6

2 Answers2

0

You can access image element using document.getElementById and then change src property.

First, get the value from productName using,

const val = document.getElementById("productName").innerText;

then add that value to the source link of the image using,

document.getElementById("dynamicImg").src = `https://cdn2.hubpot.net/hubf/45645/asset-diecu/sampleImage/${val}_a.png`;
Uditha
  • 55
  • 6
  • in the html, would the img src attribute be left empty like this – ember Wolf Feb 12 '21 at 01:40
  • @emberWolf this is the basic way of doing what you described here. but that can be changed base on your code. We can get an idea where the problem is, if you post your code here. – Uditha Feb 12 '21 at 01:50
0
const img = document.getElementById('dynamicImg')
const name = document.getElementById('productName').innerHTML

img.src = `https://cdn2.hubpot.net/hubf/45645/asset-diecu/sampleImage/${name}_a.png`
chuck_d
  • 121
  • 1
  • 3
  • What would the img tag look like in the html? – ember Wolf Feb 12 '21 at 01:36
  • @emberWolf it could look the same but the `src` attribute would be updated. I'm not sure exactly what you're trying to do, but if you want to change the src depending on user input you would make that `p` an `input` and then create a function that would update the `img.src` whenever somebody updated the value. – chuck_d Feb 12 '21 at 01:41
  • Thank you for you help, I'm trying to have the img src attribute dynamically change based on the productName p tag value that is pulled in from a URL parameter in a different script. But I only need that last part of the img src to change where the number is right before the underscore – ember Wolf Feb 12 '21 at 01:43
  • Got it. So yeah whenever you set that p tags value, also set the img.src like I did in the example. Inserting the name like that will create the src that you want using [string interpolation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals). – chuck_d Feb 12 '21 at 01:53
  • What would the html img tag look like? Would I leave the src empty ? or not include it at all in the img tag? Since it is being added by the script – ember Wolf Feb 12 '21 at 01:55
  • The best way would be to see if it exists and create it if it doesn't... ``` let img; img = document.getElementById('myId'); if (!img) { img = document.createElement("img"); img.id = "myId"; document.body.appendChild(img); } img.src = `my-dynamic-string-${variable}.blah`; ``` Sorry it looks like SO's comments don't let you format code. The idea is to create the element if you can't find it the first time, but then if you can find it then just change the src like normal. – chuck_d Feb 12 '21 at 02:00