Search code examples
javascriptswitch-statementcaseonmouseoveronmouseout

Switch cases with onmouseover and onmouseout events

I've been trying to get a switch to work with both onmouseover and onmouseout, but i don't know how to bind it to the events. Thanks in advance for your help

<script>
function img(img){
switch(img)
{
case "showSq": 
document.getElementById("square").innerHTML = '<img src="square.png">';
break;
case "hideSq": 
document.getElementById("square").innerHTML = '';
break;
case "showCr": 
document.getElementById("circle").innerHTML = '<img src="circle.png">';
break;
case "hideCr": 
document.getElementById("circle").innerHTML = '';
break;
}}
</script> 
<body>
<div id=right>
<h1> Geometry </h1>
<p>
<span onmouseover="img(showSq)" onmouseout="img(hideSq)"> SQUARE</span>,
<span onmouseover="img(showCr)" onmouseout="img(hideCr)"> CIRCLE </span>
</p>
<p> <span id="circle"> <span id="square"> </p>
</div>
Solution

  • your params should be as img('showSq') and <span> tags are missing </span> tags

    <p> <span id="circle"></span> <span id="square"></span> </p>