How to change the background box based on input value in javascript

user_12929236 0
Viewed 57

Here i'm trying to change the color based on value and rest of should be in white background, if input value is 1 then it should highlighted to red , if i changed the value to 4 then it should be highlighted in to red and rest of values 1 should be in white

I am still learning,Thanks in advance

<table>
   <tr>
      <td id="data1">1</td>
      <td>2</td>
      <td>3</td>
   </tr>
   <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
   </tr>
   <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
   </tr>
</table>

<input type="text" id="valuesData" />
<button onclick="myFunction()" value="click me"></button>
</body>


<script>
   function myFunction(){
    if(document.getElementById('valuesData').value >= '9'){
    document.getElementById('data1').style.background='red' 
      }
   else{
   alert("value should not be greater than 9");
   }
   }
    
</script>
javascript
5 Answers

This should fix it. There were a few errors originally:

  1. You were comparing the string value of the input to the string value '9' - the input should either be changed from text to number, or you should use parseInt as I have. Note, that entering a non-numeric value will cause an error unless it is checked for, so it's better to change the input field's type to number - also, you should compare to the numeric value 9, rather than the string value '9'

  2. Your conditional was actually the wrong way around - i.e. >= should be <= in this case

Updated:

   function myFunction() {

     var val = document.getElementById('valuesData').value;
       document.querySelectorAll("table td").forEach(function(td) {
       td.style.background = "";
     })

     if (document.getElementById('valuesData').value != "" && parseInt(document.getElementById('valuesData').value) <= 9) {
       val = parseInt(val);
       document.querySelectorAll("table td")[val - 1].style.background = 'red';
     } else {
       alert("value should be between 1 and 9");
     }
   }
user_140708630 
 <body>
    <input type="text" id="valuesData" />
 <button onclick="myFunction()" value="click me"></button>
 </body>
<script>
function myFunction(){
 if(document.getElementById('valuesData').value >= 9){
 document.getElementById('data1').style.background='red' 
   }
else{
alert("value should not be greater than 9");
}
}
 </script>
user_136901760 

function myFunction(){
const value= parseInt(document.getElementById('valuesData').value);
 if( value<= 9){
 const set=document.getElementsByClassName('data1')
 for (item of set){
     if(item.innerHTML==value){item.style.background='red'
     }else item.style.background='white';
 }
   }
else{
alert("value should not be greater than 9");
}
}
     <table>
<tr>
<td class="data1">1</td>
<td class="data1">2</td>
<td class="data1">3</td>
</tr>
<tr>
<td class="data1">4</td>
<td class="data1">5</td>
<td class="data1">6</td>
</tr>
<tr>
<td class="data1">7</td>
<td class="data1">8</td>
<td class="data1">9</td>
</tr>

</table>
 <input type="text" id="valuesData" />
 <button onclick="myFunction()" value="click me"></button>

user_140535710

You can get all tds and check if the user input matches with your td and based on you can change the color i.e. red and for rest of the tds make it white

function myFunction(){
    var input = parseInt(document.getElementById('valuesData').value);
    if(!isNaN(input) && input>=1 && input<=9)
            document.getElementsByTagName('td')[input-1].style.background='red';
    else
        alert('invalid input')
      
    let allTds = document.getElementsByTagName('td');
        for(let i=0;i<allTds.length;i++){
        if(i!==input-1){
        allTds.item(i).style.background='white'
      }
    }
  }
<body>
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>

  </table>
  <input type="text" id="valuesData" />
  <button onclick="myFunction()" value="click me">Click</button>
</body>

user_61335590

You could use data attributes to see which td has a value of the entered text. It will change the background of entered value td.

Also before applying the background red to the entered value we can check all the tds and clear them with white background.

All the value entered in an input are string format so we need to use parseInt function to make sure they are converted to integar.

Live Demo:

function myFunction() {
  //Get input value and convert to int using parseInt
  let value = parseInt(document.getElementById('valuesData').value)
  //Clear all the td with white background
  let allTds = document.getElementsByTagName('td');
  for (let i = 0; i < allTds.length; i++) {
    allTds.item(i).style.background = 'white'
  }
  //Apply red background to the entered td with matching data-id
  let getTd = document.querySelector('[data-id="' + value + '"]');
  if (value <= '9') {
    getTd.style.background = 'red'
  } else {
    alert("value should not be greater than 9");
  }
}
<table>
  <tr>
    <td data-id="1">1</td>
    <td data-id="2">2</td>
    <td data-id="3">3</td>
  </tr>
  <tr>
    <td data-id="4">4</td>
    <td data-id="5">5</td>
    <td data-id="6">6</td>
  </tr>
  <tr>
    <td data-id="7">7</td>
    <td data-id="8">8</td>
    <td data-id="9">9</td>
  </tr>
</table>
<input type="text" id="valuesData" />
<button onclick="myFunction()">Click me</button>

user_136690480
Related