HTML中的“未捕获的TypeError：bgColor不是函数”选择onchange

Question

I have an HTML switch with an onchange tag that should run the JavaScript function bgColor with the argument this but whenever I try using this, it gives me an error: Uncaught TypeError: bgColor is not a function . Any ideas?

HTML

<select id="selectBgColor" onchange="bgColor(this)">
    <option value="blue" selected>Blue</option>
    <option value="gray">Gray</option>
</select>

JavaScript

// The following is for changing graph color
var graphColor = "blue";
var graphBgColor = "rgba(106, 154, 177, 0.3)";
var graphBorderColor = "rgb(99, 121, 132)";
function bgColor(s) {
    graphColor = $(s).val();
    graphBgColor = graphColor == "blue" ? "rgba(106, 154, 177, 0.3)" : "rgba(0, 0, 255, 0.3)";
    graphBorderColor = graphColor == "blue" ? "rgb(99, 121, 132)" : "rgb(0, 0, 255)";
    update_temp_and_time();
}

Any help would be appreciated. Thanks!

Answer 1

Use a different name for the function. The environment in which onxyz -attribute style event handler code is run has several with clauses (effectively) putting all properties of the element (and some other things) in scope*, with precedence over globals. There's an old, no-longer-standard property called bgColor on elements which is getting in the way of your global function.

Another name (like setBackgroundColor ) will work:

 // The following is for changing graph color var graphColor = "blue"; var graphBgColor = "rgba(106, 154, 177, 0.3)"; var graphBorderColor = "rgb(99, 121, 132)"; function setBackgroundColor(s) { graphColor = $(s).val(); graphBgColor = graphColor == "blue" ? "rgba(106, 154, 177, 0.3)" : "rgba(0, 0, 255, 0.3)"; graphBorderColor = graphColor == "blue" ? "rgb(99, 121, 132)" : "rgb(0, 0, 255)"; update_temp_and_time(); } function update_temp_and_time() { console.log("graphColor = " + graphColor); } 

 <select id="selectBgColor" onchange="setBackgroundColor(this)"> <option value="blue" selected>Blue</option> <option value="gray">Gray</option> </select> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

---

* This is one of the many reasons not to use onxyz -attribute style event handlers, and not to use globals. Instead, ensure your code is not at global scope (for instance, wrap it in a scoping function) and hook up your handlers dynamically.

Eg:

 // Scoping function (function() { // The following is for changing graph color var graphColor = "blue"; var graphBgColor = "rgba(106, 154, 177, 0.3)"; var graphBorderColor = "rgb(99, 121, 132)"; $("#selectBgColor").on("change", function() { graphColor = $(this).val(); graphBgColor = graphColor == "blue" ? "rgba(106, 154, 177, 0.3)" : "rgba(0, 0, 255, 0.3)"; graphBorderColor = graphColor == "blue" ? "rgb(99, 121, 132)" : "rgb(0, 0, 255)"; update_temp_and_time(); }); function update_temp_and_time() { console.log("graphColor = " + graphColor); } })(); 

 <select id="selectBgColor""> <option value="blue" selected>Blue</option> <option value="gray">Gray</option> </select> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>