Javascript корректировки - PullRequest
Новая
       0

Javascript корректировки

2 голосов
/ 03 марта 2020

Я новичок в Javascript, так что простите зачаточный код. Можно ли как-нибудь получить код для печати с указанными настройками из пользовательского ввода? 


<!DOCTYPE html>
<html lang="en">
<body>    

  <label for="height">height: </label>
  <input id="height" type="number" min="100" max="600" step="1" value="100"/>

  <label for="width">width: </label>
  <input id="width" type="number" min="100" max="600" step="1" value="100"/>

  <input id="sbutton" type="button" value="Adjust Size"/>

</body>
</html>

Ответы [ 2 ]

1 голос
/ 03 марта 2020

Закажите этот кодовый блок для демонстрации: https://codepen.io/octalpixel/pen/vYOJGXg

<!DOCTYPE html>
<html lang="en">

<body>

  <label for="height">Height: </label>
  <input id="height" type="number" min="100" max="600" step="1" value="100" />

  <label for="width">Width: </label>
  <input id="width" type="number" min="100" max="600" step="1" value="100" />

  <input id="size_btn" onclick="adjustSize()" type="button" value="Adjust Size" />

  <div id="customBox" style="background:red;margin-top:12px">
  </div>

  <script>
    function adjustSize() {
      changeBoxSize(0, 0)
      const height = document.getElementById("height").value;
      const width = document.getElementById("width").value
      changeBoxSize(width, height)
    }

    function changeBoxSize(width, height) {
      const box = document.getElementById("customBox")
      box.style.width = `${width}px`;
      box.style.height = `${height}px`;
    }
  </script>

</body>

</html>

Чтобы объяснить вам код

Я создал две функции, используя javascript, называемый «AdjustSize» и «ChangeBoxSize»

Функция AdjustSize отвечает за получение значений из соответствующих полей ввода и передачу их «changeBoxSize». Функция срабатывает во время «onclick», то есть когда нажимается кнопка с идентификатором атрибута «size_btn»

Функция changeBoxSize принимает в качестве параметров ширину и высоту, и ей присваивается css стили высоты и ширины, выбрав элемент div идентификатора атрибута "customBox"

1 голос
/ 03 марта 2020

Добавьте прослушиватель событий к кнопке и получите ширину и высоту от входов. Затем примените стили (ширина и высота) к div. 

let divResize = document.getElementById('div-resize');

document.getElementById('size_btn').addEventListener('click', function() {

  let height = document.getElementById('height').value;
  let width = document.getElementById('width').value;

  divResize.style.width = width + "px";
  divResize.style.height = height + "px";

})
#div-resize {
  width: 0px;
  height: 0px;
  border: 1px solid #000;
}
<label for="height">Height: </label>
<input id="height" type="number" min="100" max="600" step="1" value="100" />

<label for="width">Width: </label>
<input id="width" type="number" min="100" max="600" step="1" value="100" />

<input id="size_btn" type="button" value="Adjust Size" />


<div id="div-resize"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...