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 Source
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>