Как я могу получить элемент из выпадающего списка в качестве вывода дважды или трижды или любое количество раз, как пользовательский ввод через JavaScript - PullRequest
Новая
       0

Как я могу получить элемент из выпадающего списка в качестве вывода дважды или трижды или любое количество раз, как пользовательский ввод через JavaScript

0 голосов
/ 27 февраля 2019

Как я могу получить элемент из выпадающего списка как вывод дважды или трижды или любое количество раз как пользовательский ввод через JavaScript

Я сталкиваюсь с проблемой при получении вывода из выпадающего списка дважды / трижды и т. Д. В SVG (МасштабируемыйВекторная графика.) С помощью JavaScript Например, я создал выпадающий список и элементы Rectagle, PolyLine и Circle (это фигуры в SVG), а моя страница дизайна состоит из текстового поля, в которое мы будем загружать пользовательский ввод, выпадающий список, как указано выше, и 1 кнопки button.soкогда пользователь, например, набрал 2 в текстовом поле и выбрал Rectangle из выпадающего списка, выход должен быть в 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>

1 Ответ

0 голосов
/ 28 февраля 2019

Ваш код не работает.Я сделал некоторые изменения в 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...