-2

Anyone is able to help us to solve why the localstorage is not functioning for the below

           Try a lot of ways nothing win. The reason is very simple DON'T KNOW THE RIGHT WAY ?

BELOW IS THE STYLE APPLIED

<style>


.div1 {
  background-color: #ff0;width:150px;height:150px;
}
</style>

Below is the HTML

<input type="color" id="colorit" onchange="setColor()"/>
<div class="div1">
  
</div>

AND FINALLY THE SCRIPT

<script>

$(".div1").localStorage.getItem('bgcolor') ;
 var ClassName;

function setColor() {
  //localStorage.setItem('background', $('#colorit').val());
  ClassName = $('#colorit').val();
  $('.div1').css('background-color', ClassName);
   localStorage.setItem('bgcolor', 'ClassName');
}

function getColor() {
  //localStorage.getItem('background');
  $('#colorit').val(ClassName);
 localStorage.getItem('bgcolor') ;
}

setColor();

</script>
varghese
  • 1
  • 3

2 Answers2

0

By using querySelectorAll you can get a list of all the elements. By wrapping this in an array you can iterate it easily. The natural NodeList that gets returned by querySelectorAll may not be easily iterable/mappable/other array functions, hence the wrapping in an array with the spread operator, so you have more options avaialable.

/** stack overflow localstorage faker **/
stackOverflowlocalStorage = { 
   backColor: null, 
   setItem : function(name, val) {this[name] = val;
   }
 }
/** end polyfill **/
// on input, get value and save it as 'backValue'
function changeback() { 
  var backColor = document.getElementById('revenb').value;
  [...document.querySelectorAll('tr:nth-child(even)')].forEach((element, index) => {
     element.style.backgroundColor = backColor;
  });
  stackOverflowlocalStorage.setItem('backValue', backColor);
}

// uncomment to test  stackOverflowlocalStorage.backValue
// stackOverflowlocalStorage.backValue = '#00ffff';

// if there is a value stored, update color picker and background color
if(stackOverflowlocalStorage.backValue) {
  document.getElementById('revenb').value = stackOverflowlocalStorage.backValue;
  [...document.querySelectorAll('tr:nth-child(even)')].forEach((element, index) => {
     element.style.backgroundColor = stackOverflowlocalStorage.backValue;
  });
}
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #eee;
}
<input type="color" id="revenb" onchange="changeback()"/>
<table>
  <tr><td> row 1 </td></tr>
  <tr><td> row 2 </td></tr>
  <tr><td> row 3 </td></tr>
  <tr><td> row 4 </td></tr>
  <tr><td> row 5 </td></tr>
  <tr><td> row 6 </td></tr>
</table>
Tschallacka
  • 27,901
  • 14
  • 88
  • 133
  • it doesn't work for me as i used here as follows – varghese Jun 14 '21 at 11:04
  • function changeback() { var backColor = document.getElementById('revenb').value; localStorage.setItem('backValue', document.querySelectorAll('tr:nth-child(even)').style.backgroundColor = backColor); } – varghese Jun 14 '21 at 11:04
  • The answer is correct. @varghese please read https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return as you're trying to use an array of elements like a normal element. – evolutionxbox Jun 14 '21 at 11:06
  • Also put an id for the table and then try like this function changeback() { var backColor = document.getElementById('revenb').value; localStorage.setItem('backValue', document.querySelectorAll('#myTable tr:nth-child(even)').style.backgroundColor = backColor); } but not working – varghese Jun 14 '21 at 11:26
  • Please read the linked question. You cannot use `.style` directly after `querySelectorAll`. The link explains why. – evolutionxbox Jun 14 '21 at 11:40
  • 1
    The comments above go like this: "A: do this" "OP: no it doesn't work when I do something completely different". – freedomn-m Jun 14 '21 at 11:51
  • @varghese I've adapted the code to work with your modified question code. I hope you can now see how the code is supposed to work. – Tschallacka Jun 14 '21 at 12:21
  • Tschallacka, thanks for solving the first part. Now the rows change color but cookie is not functioning. Any solution ? – varghese Jun 15 '21 at 03:09
  • @varghese You need to replace stackOverflowlocalStorage for localStorage. I needed a drop in for the sandbox stack overflow snippets run in. How you save your value you can solve with your oiriginal solution via localStorage. – Tschallacka Jun 15 '21 at 07:17
0

Example using querySelectorAll:

document.querySelectorAll('#myTable tr:nth-child(even)')


let els = document.querySelectorAll('#myTable tr:nth-child(even)');
[...els].forEach((e) => {
    console.log(e.textContent);
});
<table id='myTable'>
  <tr>
    <th>Foo</th>
    <th>Bar</th>
  </tr>
  <tr>
    <td>even 1</td>
    <td>even 2</td>
  </tr>
  <tr>
    <td>odd 1</td>
    <td>odd 2</td>
  </tr>
    <tr>
    <td>even 3</td>
    <td>even 3</td>
  </tr>
</table>
0stone0
  • 34,288
  • 4
  • 39
  • 64
  • other details for the question – varghese Jun 14 '21 at 11:13
  • Rows Even Background-Color : – varghese Jun 14 '21 at 11:14
  • function changeback() { var backColor = document.getElementById('revenb').value; localStorage.setItem('backValue', document.querySelectorAll('tr:nth-child(even)').style.backgroundColor = backColor); } – varghese Jun 14 '21 at 11:14
  • if(localStorage.frontValue) { document.getElementById('input#revenc').value = localStorage.frontValue; document.querySelectorAll('tr:nth-child(even)').style.color = localStorage.frontValue; }; – varghese Jun 14 '21 at 11:14
  • Please edit your original question to add **all** the details, comments are not suitable for code. – 0stone0 Jun 14 '21 at 11:15
  • Please format the code, this is not a free coding service, we're here to help, but you're required to show your own research and failed attempts. – 0stone0 Jun 14 '21 at 11:55
  • don't understand ? explain if possible to make me understand. – varghese Jun 14 '21 at 11:58