Integer input to SVG color changing with no submit

Question

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>

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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>

Integer input to SVG color changing with no submit

Sign up