Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Нарисовать в браузере линию по координатам двух точек (https://javascript.ru/forum/css-html/73127-narisovat-v-brauzere-liniyu-po-koordinatam-dvukh-tochek.html)

Verchigo 23.03.2018 00:33

Нарисовать в браузере линию по координатам двух точек
 
Здесь рисуется линия слева на право. Проблема в том что она сразу пропадает.
<html>
 <head>
  <title>Линия</title>
  <script>
   function line(x1,y1,x2,y2)
   {
      if (x1<x2 && y1<y2)
      {
         x=x1; dx=(x2-x1)/(y2-y1)
         for(y=y1;y<y2;y++)
         {
            hr1=document.createElement("hr")
            hr1.style.color="black";
            hr1.style.position="absolute" 
            hr1.style.left=x; 
            hr1.style.top=y; 
            hr1.width=Math.round(dx)
            doc.appendChild(hr1); 
            x+=dx
         }
      }
   }
   function line1()
   {
      x1=eval(form1.xt1.value); 
      y1=eval(form1.yt1.value)
      x2=eval(form1.xt2.value); 
      y2=eval(form1.yt2.value)
      line(x1,y1,x2,y2)
   }
  </script>
 </head>
 <body id="doc">
  <form id="form1">
   <p>Координаты начальной точки
    <br><font face="system">x = </font><input type=text id="xt1" size=10>
    <br><font face="system">y = </font><input type=text id="yt1" size=10>
   <p>Координаты конечной точки
    <br><font face="system">x = </font><input type=text id="xt2" size=10>
    <br><font face="system">y = </font><input type=text id="yt2" size=10>
   <p><button onClick="line1()">Рисование</button>
  </form>
 </body>
</html>

ksa 23.03.2018 09:14

Цитата:

Сообщение от Verchigo
Проблема в том что она сразу пропадает.

Это не единственная твоя проблема... :D

У тебя просто происходит отправка формы.
И хтмл просто отвратный... :(

Verchigo 23.03.2018 11:22

Не понял ваше замечание. Давайте опустим то что html отвратный, если конечно это не влияет на мою проблему. Как происходит отправка формы ? По мне код написан вполне логично, не могу определить что не так

ksa 23.03.2018 11:30

Цитата:

Сообщение от Verchigo
Как происходит отправка формы ?

Стандартно:
- нажали на кнопку
- нажали <Enter> в поле

рони 23.03.2018 11:38

Verchigo,
уберите отправку формы либо так
<form id="form1" onsubmit="return false" >
либо
так
<button type="button" onClick="line1()">Рисование</button>

Verchigo 23.03.2018 11:49

Теперь всё как надо работает. Спасибо


Часовой пояс GMT +3, время: 03:55.