Я пытаюсь взять ширину из "demo" div и поместить ее в значение "input number". Я не могу понять, где я допустил ошибку ...

function myFunction() {
    var element = document.getElementById("poster"),
    style = window.getComputedStyle(element),
    width = style.getPropertyValue('width');
  
  document.getElementById("demo").value = width;
}
 
<div id="poster" style="width:35px;height:45px;background-color:blue;"></div>

<input id="demo" type="number" placeholder="0" min="" max="" step="0.1">

<button onclick="myFunction()" type="button">Click Me!</button>
 
-1
aldin_abdagic 28 Май 2019 в 11:27

2 ответа

Лучший ответ

Это связано с тем, что значение width равно 35px, поэтому вы должны удалить px, прежде чем присвоить его document.getElementById("demo").value в качестве числа, как только ваш тип input будет {{X5} }} как следующий код

<div id="poster" style="width:35px;height:45px;background-color:blue;"></div>
<input id="demo" type="number" placeholder="0" min="" max="" step="0.1">
<button onclick="myFunction()" type="button">Click Me!</button>
<script>
    function myFunction() {
        var element = document.getElementById("poster"),
        style = window.getComputedStyle(element),
        width = style.getPropertyValue('width').match(/\d+/);

      document.getElementById("demo").value = width;
    }
</script>

Если вы хотите получить номер ширины, как это без единицы, например. 35px или 35% получит 35, вы можете использовать следующий код:

  <div id="poster" style="width:35px;height:45px;background-color:blue;"></div>
<input id="demo" type="number" placeholder="0" min="" max="" step="0.1">
<select id="unit" >
  <option >none</option>
  <option value="%">%</option>
  <option value="px">px</option>
</select>
<button onclick="myFunction()" type="button">Click Me!</button>
<script>
    function myFunction() {
        var element = document.getElementById("poster"),
        width = element.style["width"].match(/\d+/),
        unit = element.style["width"].match(/[^\d]+/);
        document.getElementById("unit").value = unit
        document.getElementById("demo").value = width;
    }
</script>
1
Ahmed Yousif 28 Май 2019 в 16:02

Вам необходимо преобразовать width в number, потому что вы используете input number, а не текст. На самом деле, ваш width является строкой (35 пикселей).

function myFunction() {
    var element = document.getElementById("poster"),
    style = window.getComputedStyle(element),
    width = style.getPropertyValue('width');

  document.getElementById("demo").value = parseFloat(width);
}
<div id="poster" style="width:35px;height:45px;background-color:blue;"></div>

<input id="demo" type="number" placeholder="0" min="" max="" step="0.1">

<button onclick="myFunction()" type="button">Click Me!</button>
1
Radonirina Maminiaina 28 Май 2019 в 08:28
56337991