updating variable from js file in an html file

Question

I have some js code that has been imported from another file which has a variable in it I want to update in my HTML file. How can I update the variable without pasting the js code into my HTML file?

JS (script.js):

var link = "https://example.com"
var codeBlock = `...some html code... ${link} ...some more html code`;

document.getElementById("div").innerHTML = codeBlock

HTML:

<div id="div"></div>
<script src= "script.js"></script>
<script>
    //I want to change this variable
    var link = "https://anotherexample.com"
</script>

Please elaborate the code in more detail. Its hard to understand exact meaning — VikrantMore
– VikrantMore, Commented Apr 1, 2019 at 13:00
You should include the javascript file. You can create a new javascript file, then include it as a script either in the head or the body — MMJM
– MMJM, Commented Apr 1, 2019 at 13:01
Does this mean like, how can i change my HTML link variable value runtime based on external file variable ? — VikrantMore
– VikrantMore, Commented Apr 1, 2019 at 13:07

Quentin · Accepted Answer · 2019-04-01 13:11:00Z

1

On line one of your code, you declare link and give it a value.

On line two, you use that value.

You can't change link later on and affect what happened when the value was read and used in the past.

If you want to change the final result, then it is the final result you have to change (i.e. you need to assign a new value to document.getElementById("div").innerHTML).

answered Apr 1, 2019 at 13:11

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Duncan Leung Over a year ago

could you please explain further on this?

Quentin Over a year ago

@DuncanLeung — What else is there to explain? It's just linear time. One thing happens after another. You can't time travel to change something before it affected something else.

Duncan Leung Over a year ago

no, like the part about assigning a new value to document.getElementById("div").innerHTML

Quentin Over a year ago

document.getElementById("div").innerHTML = somethingNew

VikrantMore · Accepted Answer · 2019-04-01 13:26:37Z

1

You are getting the value but not setting it to the variable that the HTML is showing.Is this you are looking for :

var updatedLink = document.getElementById("anotherlink").innerHTML;
var codeBlock = `...some html code... ${updatedLink} ...some more html code`;

document.getElementById("div").innerHTML = codeBlock

<div id="div"></div>
<div id="anotherlink" style="display:none"></div>
<script src= "script.js"></script>
<script>
    var link = "https://anotherexample.com";
    document.getElementById("anotherlink").innerHTML = link
</script>

answered Apr 1, 2019 at 13:26

VikrantMore

9037 silver badges25 bronze badges

6 Comments

Duncan Leung Over a year ago

yes, but chrome shows this error: ``` bottombar.js:1 Uncaught TypeError: Cannot read property 'innerHTML' of null at bottombar.js:1 ```

Duncan Leung Over a year ago

Yes, but chrome gives me these errors: script.js:1 Uncaught TypeError: Cannot read property 'innerHTML' of null at script.js:1 and Uncaught TypeError: Cannot set property 'innerHTML' of null at ______:115

VikrantMore Over a year ago

@DuncanLeung yes, you will get this error unless you include required scripts either in the head or in body.

Duncan Leung Over a year ago

so the javascript in script.js has to be in the html page, right?

VikrantMore Over a year ago

Yes you have to include the js file in your page.

|

froggomad · Accepted Answer · 2019-04-02 13:27:02Z

0

Your script is working and the variable is being changed. If you console.log(link) after declaring it again, you'll see the variable has changed. If you're expecting the script to execute again, that won't happen without calling it again.

What you may want to try is iterating through the document looking for something to trigger that statement, for example, links in the document.

const links = document.querySelectorAll('a');  
var href = [];
links.forEach(link => href.push(link.href));
var codeBlock = '';

href.forEach(link => {
  if (link == "https://stacksnippets.net/anotherexample.com") {
    codeBlock = `...some html code... ${link} ...some more html code`;
    document.getElementById('div').innerHTML = codeBlock;
  }  
})

<div id="div"><a href="anotherexample.com">link</a></div>

Or without checking for a specific URL:

const links = document.querySelectorAll('a');  
var href = [];
links.forEach(link => href.push(link.href));
var codeBlock = '';

href.forEach(link => {
  codeBlock = `...some html code... ${link} ...some more html code`;
  document.getElementById('div').innerHTML = codeBlock;     
})

<div id="div"><a href="anotherexample.com">link</a></div>

edited Apr 2, 2019 at 13:27

answered Apr 1, 2019 at 13:38

froggomad

1,9353 gold badges21 silver badges46 bronze badges

2 Comments

Duncan Leung Over a year ago

if I have multiple pages that need this code, do I need to make multiple if statements for each of them? is there and easier way?

froggomad Over a year ago

You don't actually need the if statement at all. That's just an example to target a specific url

Collectives™ on Stack Overflow

updating variable from js file in an html file

3 Answers 3

4 Comments

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related