There is a variable let say var content which holds some HTML content and this HTML also contains a JavaScript variable let say ${id}. Now I want to update the value of ${id} variable. I have tried with the following code but it's not working.
var id = '';
var content = `<div class="row well margin_btm_ten">
<div class="col-md-1">
<b>ID is ${id}</b>
</div>`;
row_id = 2;
setTimeout(function(){
console.log(content)
});
You can have content be a function that returns the html content, so that it will calculate it every time it's called. This way if the id variable changes, the value returned by content() will also change:
var id = 'one';
var content = () => `<div class="row well margin_btm_ten">
<div class="col-md-1">
<b>ID is ${id}</b>
</div>`;
console.log(content());
id = 'two';
console.log(content());You can make id a function with custom setter for id property which will make content update every time you set a new id.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set
function id() {
var id;
Object.defineProperty(this, 'id', {
get() {
return id;
},
set(value) {
id = value;
content = `<div class="row well margin_btm_ten">
<div class="col-md-1">
<b>ID is ${id}</b>
</div>`;
},
enumerable: true,
configurable: true
});
};
var obj = new id();
var content = `<div class="row well margin_btm_ten">
<div class="col-md-1">
<b>ID is ${obj.id}</b>
</div>`;
console.log(content) // id: undefined
app.innerHTML += content
obj.id = 2;
console.log(content) // id: 2
app.innerHTML += content
obj.id = 'Hello World!';
console.log(content) // id: 'Hello World'
app.innerHTML += content<div id="app"></div>
It's not possible since the reference to "content" is being created with the current value of the variable id. JavaScript variables are basically containers for storing data values. You would need to "rerun" the content variable, to get the new id. But I think you should rather use functions than overwriting variables.
const printName = (name => console.log(`Hello ${name}`));
let name = "Mark";
printName(name);
name = "Peter";
printName(name);
row_idyou have never used that.idand have it reflected incontent. You will need to explicitly re-buildcontentwhen changingid.