MozillaZine


JavaScript question inserting variables into html elements

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
Bethrezen
 
Posts: 425
Joined: September 13th, 2003, 11:56 am

Post Posted May 14th, 2022, 5:12 pm

Hi all

Quick question why is it that when I try to do something like this

Code: Select all
<p><script>document.write(color)</script></p>

<script>
var color = "blue";
</script>


I get a color is not defined error even though color clearly is defined ?

The reason I ask is because I got taught to put scripts at the end of the page to prevent them from blocking the loading of the page, but clearly in a case like this where I want to output the value of a variable to some element on the page that isn’t possible if I have to put the script that holds the variable before the html element in to which I’m inserting the value.

Now while in a simple example like this I could just do something like this

Code: Select all
<script>
  var color = "blue";
  document.querySelector('p').innerHTML = color;
</script>


What about if I wanted to do something a little more complicated like inserting a variable into a table for example.

ideally what I'd like to be able to do is something like this

Code: Select all
<script>

var x_coordinate = 100;
var y_coordinate = 200;
var z_coordinate = 150;

</script>

<table id="coordinates">
  <tr>
    <td>X</td>
    <td>:</td>
    <td>javascript:(x_coordinate); km</td>
  </tr>

  <tr>
    <td>Y</td>
    <td>:</td>
    <td>javascript:(y_coordinate); km</td>
  </tr>

  <tr>
    <td>Z</td>
    <td>:</td>
    <td>javascript:(z_coordinate); km</td>
  </tr>
</table>


as that's a simpler way to go about things or it would be if it actuality worked, now with a small table like the one above I could populate the cells like this

Code: Select all
var table = document.querySelector('table#coordinates');

table.rows[0].cells[2].innerHTML = x_coordinate;
table.rows[1].cells[2].innerHTML = y_coordinate;
table.rows[2].cells[2].innerHTML = z_coordinate;


But imagine you had a table with hundreds of cells that needed to be populated doing the above becomes completely impractical, so how then could I insert the variables into the appropriate table cells and have there values printed out when I load the page because doing

Code: Select all
javascript:(variable name);


simply doesn't work, is

Code: Select all
<script>document.write(variable name)</script>


the only way or is there a more succinct method.

mtalbot

User avatar
 
Posts: 38
Joined: October 13th, 2015, 5:21 am

Post Posted May 14th, 2022, 11:32 pm

A good place to start would be the MDN guides and the specific details for changing the color of a <p> element can be found on this page.

Bethrezen
 
Posts: 425
Joined: September 13th, 2003, 11:56 am

Post Posted May 18th, 2022, 1:44 pm

Two problems with that first off those pages won’t load for me I just get a blank screen, second even if I could get them to load they’re not helpful because they are not written for beginners to much technobabble that I don't understand and can't follow.

More over they usually don’t explain how accomplish the task I’m trying to accomplish, plus being dyslexic I find it much easer and faster to learn how to do a given task by simply asking questions certainly I have learned far more doing that then I ever did in the four and a half years I spent at collage studying wed development hence the question.

Certainly working on my own project as I have been has been an invaluable learning experience and while I have gotten better my knowledge is still pretty basic so I still need to ask a lot of questions when I run into things I don't understand particularly when I can't find an explanation that actually makes sense to me.

Anyway I digress so back to the question lets say I have a set-up like this

Code: Select all
<script>
var icons =
{
  icon1: {x: -609840, y: 1879080,z: -1617000},
};

for (var key in icons)
{
  var x_coordinate = icons[key]['x'];
  var y_coordinate = icons[key]['y'];
  var z_coordinate = icons[key]['z'];
}

</script>

<table id="coordinates">
  <tr>
    <td>X</td>
    <td>:</td>
    <td>x_coordinate; km</td>
  </tr>

  <tr>
    <td>Y</td>
    <td>:</td>
    <td>y_coordinate; km</td>
  </tr>

  <tr>
    <td>Z</td>
    <td>:</td>
    <td>z_coordinate; km</td>
  </tr>
</table>


The expected output would be

X : -609840 km
Y : 1879080 km
Z : -1617000 km

now of course the above doesn't work and what I actually get is

X : x_coordinate; km
Y : y_coordinate; km
Z : z_coordinate; km

because the browser isn't printing the value contained in the variable each time it loops of course this can be solved by doing

Code: Select all
<script>
var icons =
{
  icon1: {x: -609840, y: 1879080,z: -1617000},
};

for (var key in icons)
{
  var x_coordinate = icons[key]['x'];
  var y_coordinate = icons[key]['y'];
  var z_coordinate = icons[key]['z'];
}

</script>

<table id="coordinates">
  <tr>
    <td>X</td>
    <td>:</td>
    <td><script>document.write(x_coordinate);</script></td>
  </tr>

  <tr>
    <td>Y</td>
    <td>:</td>
    <td><script>document.write(y_coordinate);</script></td>
  </tr>

  <tr>
    <td>Z</td>
    <td>:</td>
    <td><script>document.write(z_coordinate);</script></td>
    </tr>
</table>


using document.write(); however probably isn't the cleanest or most elegant method so I'm wondering if there is a better way to do this, because I haven't been able to find anything, of course I'm aware that I could just do.

Code: Select all
var table = document.querySelector('table#coordinates');

table.rows[0].cells[2].innerHTML = x_coordinate;
table.rows[1].cells[2].innerHTML = y_coordinate;
table.rows[2].cells[2].innerHTML = z_coordinate;


instead of writing the variable in to the html as I did in the previous example but of course the issue with this method is that targeting rows and cells via there index value isn't exactly the easiest way to target elements and its very easy to get this wrong particularly if you have a very large table that has a lot of cells that need to be populated, and as I already mentioned above if you do have a table with lots of cells that need to be populated this method can become some what unwieldy and impractical, and its just easier to write the variable into the html and then have the browser print out value contained there in each time it loops.

jscher2000

User avatar
 
Posts: 11598
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted Today, 11:07 am

Bethrezen wrote:Hi all

Quick question why is it that when I try to do something like this

Code: Select all
<p><script>document.write(color)</script></p>

<script>
var color = "blue";
</script>

I get a color is not defined error even though color clearly is defined ?

You already know this: Inline script tags are executed in order like other HTML tags. Thus, the error message is correct because color is not yet defined at the time it is referenced. If you prefer to use inline tags, you need to make sure all the relevant values are defined before you use them. While the advice is to defer all script code that isn't needed for the initial view of the page, for example, opening annoying overlays about chatting with an agent, that doesn't apply to scripts that are essential for the initial view of the page.

On the larger application, why do you want to fill in the table cells with client-side script? If the server can build the table before sending the page to the browser, that is most efficient. Sometimes the table needs to change based on user selections and in that case, you have the choice of either requesting a new page from the server (traditional) or requesting a set of rows or data from the server to update the page (more modern). The more modern approach isn't necessarily more efficient for the site. That could be why Google switched its search result pages back to traditional after many years of experimenting with "instant" results.

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 1 guest