[SOLVED] Integer input to SVG color changing with no submit

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>

Solution

Demo

JSFIDDLE

Code

<!DOCTYPE html>
<head>
   <title>Serviced Bins</title>
   <style>
      div {
      width: 120px;
      height: 120px;
      display: inline-block;
      margin-left: 1px;
      }
   </style>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0; target-densitydpi=device-dpi" />

</head>
<body>
   <br>
   <b>Enter # of Circles<b>
   <br>
   <input type="integer" id="circles">   
   </b></b>
   <form>
      <div id="Participentfieldwrap">
         <svg height="100" width="200">
            <line x1="0" y1="50" x2="100000000" 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" onkeyup="myFunction(this)">
         </b></b>
         <script>
            //Inputing integer 1, 2 or 3 which instantly applies color formatting (RGB) to circle in the same div

            function myFunction(val) { 
              var val1=val.id.substring(val.id.indexOf("_")+1,val.id.length)
              var cir = document.getElementById("cir_"+val1);
              var into = document.getElementById("Color_"+val1);
              val=into.value;
                if(val*1 == 1)
                    cir.style.fill = "green";
                else if(val*1 == 2)
                    cir.style.fill = "red";
                else if(val*1 == 3)
                    cir.style.fill = "blue";
                else cir.style.fill = "Yellow";
            }
         </script>
      </div>
   </form>
   <script type="text/javascript">
      //Loop for creating multiple divs in a form using a limit that is set in an integer input
      var participantsField = document.getElementById("Participentfieldwrap"),
          form = document.getElementsByTagName("form")[0],
          ContestantNum = document.getElementById("circles"),
          i, timer;

      function createCircles(val) { 
          // Removing previous circles
          while (form.firstChild) {
              form.removeChild(form.firstChild);
          }
          for(i = 1; i <= val; i++) {
              var clone = participantsField.cloneNode(true);
              clone.id = "Participentfieldwrap_" + i;
              clone.querySelector("input").id = "Color_" + i;
              clone.querySelector("circle").id = "cir_" + i;
              form.appendChild(clone);
          }
      }


      ContestantNum.addEventListener('keydown', function(e) { 
          if(timer) {
              clearTimeout(timer);
          }
          timer = setTimeout(function() {
              createCircles(ContestantNum.value);

          }, 800);
      });

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