Question

如何从下拉列表中获取项目作为用户通过JavaScript输入两次或三次或任意多次输出

我在使用JavaScript例如在SVG（可缩放矢量图形）中从dropdownlist两次/三次等检索输出时遇到问题，例如，我制作了一个dropdownlist，项目为Rectagle，PolyLine和Circle（此形状在SVG中），我的设计页面组成-文本框，我们将获取用户输入，如上所述的下拉列表和1个提交按钮。因此，例如，当用户在文本框中键入2并从下拉列表中选择矩形时，输出应为2倍，即绘制矩形2次，如果用户输入3然后3个矩形应该在那儿，等等。请尽快帮助我。任何人都请帮助我

<!DOCTYPE html>
<html>

<head>
  <title>Exersice3</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="container">
      <div class="row">
        <div class="col-md-2 text-right"> <input type="text" name="" style="width: 25%;" id="getValue"> </div>
        <div class="col-md-2 text-center"> <select id="totalItems"> 				<option value="rectangle">Rectangle</option> 				<option value="polyline">PolyLine</option> 				<option value="circle">Circle</option> 			</select> </div>
        <div class="col-md-2 text-left"> <input type="submit" name="" value="Create" onclick="myFunction()"> </div>
      </div>
    </div>
  </div>
  <script>
    function myFunction() {
      debugger;
      var uInput = document.getElementById("getValue").value;
      var totalItems = document.getElementById("totalItems").value;
      if (totalItems[1].value == "polyline") {
        for (var i = 1; i <= uInput; i++) {
          var poly = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
          poly.setAttribute("points", "20,20 40,25 60,40 80,120 120,140 200,180");
          poly.setAttribute("fill", "none");
          poly.setAttribute("stroke", "blue");
          poly.setAttribute("stroke-width", 2);
          document.getElementById("mySVG").appendChild(poly);
        }
      } else if {
        for (var i = 1; i <= uInput; i++) {
          var circlee = document.createElementNS("http://www.w3.org/2000/svg", "circle");
          circlee.setAttribute("cx", 50);
          circlee.setAttribute("cy", 50);
          circlee.setAttribute("r", 40);
          circlee.setAttribute("fill", "red");
          circlee.setAttribute("stroke", "black");
          circlee.setAttribute("stroke-width", 3);
          document.getElementById("mySVG").appendChild(circlee);
        }
      }
    }
  </script> <svg id="mySVG"> 	 </svg> </body>

</html>

Answer 1

您的代码无法正常工作。我在myFunction()中进行了一些更改，代码可以正常运行但是 ...

在代码中，您可以绘制多边形或圆形。没有绘制矩形的功能。

假设您要创建2个圆，此方法可行，但是您只能看到一个圆，因为另一个圆隐藏在另一个圆的后面。 polyline也会发生同样的情况。

在这里，您需要创建一个函数来绘制带有x，y和r参数的圆。另外，您还需要一种方法来确定圆的新位置和半径。

您需要对polyline做同样的事情。您将需要一种方法来确定新形状的点。

 function myFunction() {
      debugger;
      var uInput = document.getElementById("getValue").value;
      
      var total_Items = totalItems.options[totalItems.selectedIndex].value;
      if (total_Items == "polyline") {
        for (var i = 1; i <= uInput; i++) {
          var poly = document.createElementNS("http://www.w3.org/2000/svg", "polyline");
          poly.setAttribute("points", "20,20 40,25 60,40 80,120 120,140 200,180");
          poly.setAttribute("fill", "none");
          poly.setAttribute("stroke", "blue");
          poly.setAttribute("stroke-width", 2);
          document.getElementById("mySVG").appendChild(poly);
        }
      
      } else{
        for (var i = 1; i <= uInput; i++) {
          var circlee = document.createElementNS("http://www.w3.org/2000/svg", "circle");
          circlee.setAttribute("cx", 50);
          circlee.setAttribute("cy", 50);
          circlee.setAttribute("r", 40);
          circlee.setAttribute("fill", "red");
          circlee.setAttribute("stroke", "black");
          circlee.setAttribute("stroke-width", 3);
          document.getElementById("mySVG").appendChild(circlee);
        }
      }
    }

svg{border:1px solid}

<div class="container">
    <div class="container">
      <div class="row">
        <div class="col-md-2 text-right"> 
          <input type="number" value = "1" name="" style="width: 25%;" id="getValue"> </div>
        <div class="col-md-2 text-center"> 
          <select id="totalItems">
            <option value="rectangle">Rectangle</option>
            <option value="polyline">PolyLine</option> 				
            <option value="circle">Circle</option> 			
          </select> 
        </div>
        <div class="col-md-2 text-left"> 
          <input type="submit" name="" value="Create" onclick="myFunction()"> </div>
      </div>
    </div>
  </div>
 <svg id="mySVG"></svg>

我如何从下拉列表中获取项目作为两次或三次或任意多次作为用户通过JavaScript输入的输出

1 个答案: