Replace Arrays and Const by getElementById() method ?

bobkuspe · Nov 2, 2024

Dear all,

Could someone possibly help me figure out how to use the getElementById() method to replace arrays or a variable like Const?

Two examples below:

Code:

let arr = [
          ['Team', 'Number of Championships'],
          ['Real Madrid',    66],
          ['Juventus',     37],
          ['Liverpool', 28],
          ['Bayern Munich', 48],
          ['Barcelona',  34]
              ];

and/or

Code:

const xValues = [50,60,70,80,90,100,110,120,130,140,150];
const yValues = [7,8,8,9,9,9,10,11,14,14,15];

this head of a script found at

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

Thank you in advance

Saul H. · Nov 2, 2024

This could potentially work, but would not allow for manipulation in JavaScript.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Demonstration of Substituting An Array Or Constant With document.getElementById()</title>
    </head>
    <body>
        <p id="namesarray">Jack, Fred, Alexa, Steve, Joyce</p>
        <script>
            var namesArray = document.getElementById('namesarray');
        </script>
    </body>
</html>

VBService · Nov 3, 2024

Have you tried doing it that way?

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <style>
      th {
        padding: 0 .55rem;
      }
      th:first-child {
        width: 20vw;      
      }
      td {
        text-align: center;
      }
    </style>
  </head>
  <body>

    <table>
      <thead>
        <tr>
          <th>Team</th>      
          <th>Number of Championships</th>
        </tr>    
      </thead>
      <tbody id="teams"></tbody>
    </table>

  <script>
    const teams = [
      ['Real Madrid',   66],
      ['Juventus',      37],
      ['Liverpool',     28],
      ['Bayern Munich', 48],
      ['Barcelona',     34]
    ];

    let rows = '';
    for (const team of teams) {
      rows += `<tr>
                 <td>${team[0]}</td>
                 <td>${team[1]}</td>
               </tr>`;
    }

    document.getElementById('teams').innerHTML = rows;
  </script>
  </body>
</html>

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <style>
      #x-values {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div>xValues: <span id="x-values"></span></div>

    <script>
      const xValues = [50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150];
      document.getElementById('x-values').textContent = xValues.join(', ');
    </script>
  </body>
</html>

bobkuspe · Nov 3, 2024

Thank you for your code VBService.

I now that is simple as buttering a bread, but i can't wrap my head around it! I need however a little example (very simple) as I can place the method document.getElementByID('x-values') and document.getElementById('teams') rather than (instead of) the numbers used in const using probably an user <input type=text> and NO <DIV ID>. Absolutely not! Regards

VBService · Nov 4, 2024

bobkuspe said:
using probably an user <input type=text> and NO <DIV ID>

If I understood correctly, it might look like this

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <style>
      input[type=number] {
        width: 5ch;
      }
      input[type=number]::-webkit-outer-spin-button,
      input[type=number]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
      output {
        display: block;
        width: 40vw;
      }
    </style>
  </head>
  <body>
    <div>
      <label>xValues: <input type="number" name="x-values" id="x-values" min="0" autofocus></label>
      <button id="x-values-add">Add</button>
      <output></output>
    </div>

    <script>
      const xValues = [];
      const xValues_button = document.getElementById('x-values-add'),
            xValues_input = document.getElementById('x-values');

      xValues_input.focus();
      xValues_button.addEventListener('click', xValuesAdd);

      function xValuesAdd() {       
        if (xValues_input.value) {
          xValues.push(xValues_input.value);
          document.querySelector('output').textContent = xValues.join(', ');
          xValues_input.value = '';         
        }     
        xValues_input.focus();
      }
    </script>
  </body>
</html>

bobkuspe · Nov 5, 2024

Thank you so much. Its exactly what I want.

Sizewell B++	0	Mar 30, 2006
Rods	0	Mar 30, 2006
Lowering Of Graphite Rods Into Reactor Core	1	Mar 30, 2006
comp.lang.c Answers to Frequently Asked Questions (FAQ List)	1	Feb 1, 2004
comp.lang.c Answers to Frequently Asked Questions (FAQ List)	15	Apr 1, 2006

Replace Arrays and Const by getElementById() method ?

bobkuspe

W3Schools online HTML editor

Saul H.

VBService

bobkuspe

VBService

bobkuspe

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads