I have a table that displays by an array, how do I get the table to live update after the array is changed?

user_19837477 0
Viewed 23

This is generally what my code looks like. It's a 4x25 table with HTML/JS/CSS

<script>
var perkName = [
'Sturdy Energy',
'Resilient',
'Freedom',
];
</script>
<table>
 <tr>
    <td style='background-color: black'> 
     <button id='OneButton'onclick='removeOne()'>Select</button>
    <td id='perkOne'></td>
    <td id='perkOneEffect' style='text-align: left; padding-left: 5px'></td>
    <td id='perkOnePercent'></td>
  </tr>
  <tr>
    <td style='background-color: black'>
     <button type='button' onclick='removeTwo()'> Select </button>
    <td id='perkTwo'></td>
    <td id='perkTwoEffect'style='text-align: left; padding-left: 5px'></td>
    <td id='perkTwoPercent' value='...'></td>
  </tr>
</table>
<script>
document.getElementById('perkOne').innerHTML = perkName[0];
document.getElementById('perkTwo').innerHTML = perkName[1];
</script>

What I'm trying to do on my table is have the button invoke the function below


function remove() {
var perkName = perkName.slice(1, 3);
}

after the button click it slices the array so that the table changes to index numbers 2 and 3.

when not in block scope it function as intended. I cannot call the function with a button to remove it by invoking the function.

slice html-table arrays javascript
1 Answers

I added an eventlistener to each button and created a seperate function to change the button after each click to have a progressive table that changes with each button click.

I found out that my document.getElementById = [?] trying to display an array value after the slice was preventing the script from finishing due to there being no current array value after the slice so only one value would change.

Now the problem is, I want to import the sliced array value to an above

<p></p>

but when I slice the array again it changes the before, correctly imported array value and changes it to the new sliced array value.

I made the slice create a new array via

perkNameOne = perkName.slice(1, 26);

but even when I import perkNameOne and on the next button click I slice perkName, it still changes

document.getElementById(selectedFirst).innerHTML = perkNameOne[0];
user_198374770
Related