Home » Php » javascript – Looking to build a responsive 2 answer table with html and JS

javascript – Looking to build a responsive 2 answer table with html and JS

Posted by: admin February 25, 2020 Leave a comment

Questions:

I’m looking to have a responsive table when you select from the select dropdown and it gives you results. I’m running into a little problem. 1) when selected ($200000) it only puts it in the first table block. How do I adjust this to have go to other areas of the block? 2) How do I code multiple differences in the remaining table areas? Meaning, when I select $20000 it will give me a different answer in all the other parts of the table? I began with an if/else but not sure anymore if that is correct….Please let me know

const select = document.querySelector('select');
const para = document.querySelector('p');

select.addEventListener('change', amount);

function amount() {
  const choice = select.value;

  if (choice === '200000') {
    para.textContent = '$120,000';
  } else if (choice === '400000') {
    para.textContent = 'WOW!';
  } 
  }
#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 35%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
<table id="customers">
  <tr>
    <th>Year</th>
    <th>Select Annual Revenue for 2x mulitple
    <select id="amount">
  <option value=""></option>
  <option value="200000">$  200,000</option>
  <option value="400000">$  400,000</option>
</select>
</th>
  </tr>
  <tr>
    <td>1</td>
    <td><p></p></td> 
    </tr>    
  <tr>
    <td>2</td>
    <td><p></p></td>     
  </tr>
  <tr>
    <td>3</td>
    <td><p></p></td>     
  </tr>
  <tr>
    <td>4</td>
    <td><p></p></td>     
  </tr>
  <tr>
    <td>5</td>
    <td><p></p></td>     
  </tr>
  <tr>
    <td>TOTAL:</td>
    <td><p></p></td>
  </tr>
</table>
How to&Answers: