我是一个新手编码试图创建一个JS,输入是整数(即1,2或3),没有提交按钮。
它应该立即将圆圈的颜色或“填充”转换为(1 =红色,2 =绿色& 3 =蓝色)。
非常感谢!
<!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>
答案 0 :(得分:0)
这有助于你:
<!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>
答案 1 :(得分:0)
演示
<!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>