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>