1

I have this code, it is working changing the background color when I test it from my cPanel, but when I refresh the page it doesn't.
For example, I have set the red color and when I refresh the page, that does not show the red color but shows the default color, and when I test it from the extension, that does not give any function, does not change any color?
Can someone help me to fix this? Thank you very much.

var sum = 0;
$(document).on("input", ".MyColors", function() {
  var amount = 100;
  var values = [];
  $('input').each(function(index, element) {
    values.push(parseInt($(element).val(), 10) || 0);
  });

  var total = values.reduce(function(sum, val) {
    return sum + val;
  }, 0);
  var diff = amount - total;
  if ($(this).index() == ($(".MyColors").length)) {
    if (diff > 0) {
      console.log("last not ok")
    } else {
      console.log("last ok")
    }
  } else {
    if (diff >= 0) {
      console.log("ok")
    } else {
      console.log("not ok")
    }
  }
})

function black() {
  document.body.style.backgroundColor = "black"
}

function blue() {
  document.body.style.backgroundColor = "blue"
}

function fuchsia() {
  document.body.style.backgroundColor = "fuchsia"
}

function green() {
  document.body.style.backgroundColor = "green"
}

function orange() {
  document.body.style.backgroundColor = "#c44000"
}

function purple() {
  document.body.style.backgroundColor = "purple"
}

function red() {
  document.body.style.backgroundColor = "red"
}

function oil() {
  document.body.style.backgroundColor = "#808000"
}

function white() {
  document.body.style.backgroundColor = "white"
}

function brown() {
  document.body.style.backgroundColor = "brown"
}

function yellow() {
  document.body.style.backgroundColor = "yellow"
}

function lgreen() {
  document.body.style.backgroundColor = "#00ff00"
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="button" class="MyColors" style="background-color:black" value="    " name="B1" onclick="black()" />
  <input type="button" class="MyColors" style="background-color:blue" value="    " name="B2" onclick="blue()" />
  <input type="button" class="MyColors" style="background-color:#ff00ff" value="    " name="B3" onclick="fuchsia()" />
  <input type="button" class="MyColors" style="background-color:green" value="    " name="B4" onclick="green()" />
  <input type="button" class="MyColors" style="background-color:#808000" value="    " name="B7" onclick="oil()" />
  <input type="button" class="MyColors" style="background-color:purple" value="    " name="B5" onclick="purple()" />
  <input type="button" class="MyColors" style="background-color:red" value="    " name="B6" onclick="red()" />
  <input type="button" class="MyColors" style="background-color:#c44000" value="    " name="B8" onclick="orange()" />
  <input type="button" class="MyColors" style="background-color:white" value="    " name="B9" onclick="white()" />
  <input type="button" class="MyColors" style="background-color:brown" value="    " name="B10" onclick="brown()" />
  <input type="button" class="MyColors" style="background-color:yellow" value="    " name="B11" onclick="yellow()" />
  <input type="button" class="MyColors" style="background-color:#00ff00" value="    " name="B12" onclick="lgreen()" />
</form>
Federico Grandi
  • 6,048
  • 4
  • 23
  • 41
  • Why would you expect it to retain the changed background colour on refresh? You're doing any form of persistent storage to store then reinstate the changed colour. Also, note that the part of your code where you define numerous functions for each colour could be greatly reduced and simplified by using an object and methods. Finally, it's always advisable to avoid inline `onclick` event handlers. – Mitya Jul 31 '18 at 12:36
  • so what i need to change here, and why this code do not have any effect when i add it on my extension? Thanks for your time –  Jul 31 '18 at 12:41
  • Well it could be one of any number of reasons. You need to do some debugging. With Chrome extensions, check the console relevant to the view - so that could be the background script console, the pop-up script console - it depends in which context your code is running. – Mitya Jul 31 '18 at 12:42
  • You need to use sessionStorage to do this. – Rohit Verma Jul 31 '18 at 12:46
  • any one can show me an example code? Thank you –  Jul 31 '18 at 12:49
  • How is this related to Chrome extensions? Does this code run in a page declared via manifest.json or is it a web page? – wOxxOm Jul 31 '18 at 12:54
  • i want to use this code in new tab chrome extension, Thank you –  Jul 31 '18 at 13:00
  • Then instead of inline handlers use a separate js file for your js code ([more info](https://stackoverflow.com/a/25721457)), and `localStorage` to keep the color string like `localStorage.color = '#aaa'` and `document.body.style.backgroundColor = localStorage.color || ''` – wOxxOm Jul 31 '18 at 17:02

0 Answers0