Dabbous Dabbous - 5 months ago 13
Javascript Question

Integer input to SVG color changing with no submit

I am a newbie to coding trying to create a JS where the input is integer(that is either 1, 2 or 3) with no Submit button.

It should instantly convert the circle's color or "Fill" into (1=Red, 2=Green & 3=Blue).

Thanks Alot!

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
if (document.getElementById("Color").value == 1)
{Green";}
else if (document.getElementById("Color").value == 2)
{"Red";}
else if (document.getElementById("Color").value == 3)
{"Blue";}
}
</script>
</head>
<body>
<svg id = 9589 height="100" width="100">
<line x1="50" y1="50" x2="1000000" y2="10000" style="stroke:rgb(0,255,0);stroke-width:5" />
<svg height="100" width="100">
<circle cx="50" cy="50" r="30" stroke="black" stroke-width="3" fill="myFunction()" />
</svg>
</svg>
<br>
<b>Color<b> <br>
<input type="integer" id="Color">
</body>
</html>

Answer

this help you :

<!DOCTYPE html>
<html>
 <head>   
    </head>
   <body>
       <svg id = 9589 height="100" width="100">
           <line x1="50" y1="50" x2="1000000" y2="10000" style="stroke:rgb(0,255,0);stroke-width:5" />
          <svg height="100" width="100">
              <circle id="cir" cx="50" cy="50" r="30" stroke="black" stroke-width="3" />
           </svg>
       </svg>
       <br>
       <b>Color<b>
       <br>
    <input type="integer" id="Color">
           </b></b>
       <script>
            var cir = document.getElementById("cir");

            var into = document.getElementById("Color");

           into.addEventListener("keyup",myFunction,false);

            function myFunction() {
                if (document.getElementById("Color").value == 1) 
                    cir.style.fill = "green";
                else if (document.getElementById("Color").value == 2) 
                    cir.style.fill = "red";
                else if (document.getElementById("Color").value == 3) 
                    cir.style.fill = "blue";
            }

       </script>
   </body>
</html>
Comments