Изменить высоту границы при нажатии кнопки в Javascript - PullRequest
Новая
       0

Изменить высоту границы при нажатии кнопки в Javascript

0 голосов
/ 25 апреля 2020

Я хочу, чтобы граница увеличивалась при каждом нажатии кнопки.

Когда кнопка нажата, ее значение увеличивается на 1. Я хочу, чтобы значение высоты пикселя границы контейнера также увеличивалось. 

var i = 0;
var heightOfBorder = document.getElementById('test').style;

function buttonClick() {
  document.getElementById('incrementValue').value = i++
    heightOfBorder = "height: 500px";;
}




// document.getElementById("test").style.height =  document.getElementById('incrementValue').value;
#test {
  margin-top: 200px;
  border: solid black;
  width: 200px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Container size change</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>
  <div id="main" class="container">


    <div id="test" class="container" style="height: 50px;">

    </div>

    <button onclick="buttonClick()" id="incrementButton" type="button" class="btn btn-success">Success</button>

    <input id="incrementValue" type="text" name="button" value="0">


  </div>
  <script src="script.js" charset="utf-8"></script>
</body>

</html>

Что я делаю не так? Я учусь кодировать. Кроме того, дополнительный вопрос, кто-нибудь знает о хорошей программе наставничества?

Привет!

Ответы [ 3 ]

0 голосов
/ 25 апреля 2020 
<script>
    var i = 0;
    var heightOfBorder = document.getElementById('test').style;

    function buttonClick() {
        document.getElementById('incrementValue').value = i++;
        let currHgt = heightOfBorder.getPropertyValue('height');
        currHgt = +currHgt.slice(0, currHgt.length - 2);
        heightOfBorder.setProperty('height', currHgt + i + 'px');
    }
</script>

Если вы хотите изменить высоту на значение i.

0 голосов
/ 25 апреля 2020

Вы можете получить текущую высоту блока, используя offsetHeight, и по щелчку добавьте входное значение в стиль style.height блока и не забудьте добавить единицу в конце - в вашем случае «px». Вот пример: 

var i = 0;
var myEl = document.querySelector('#test');
var initialHeight = myEl.offsetHeight;

function buttonClick() {
    document.getElementById('incrementValue').value = i++;
    myEl.style.height = initialHeight + i + 'px';
}
0 голосов
/ 25 апреля 2020

просто измените var heightOfBorder = document.getElementById ('test'). Style; к var heightOfBorder = document.getElementById ('test'); и eightOfBorder = "height: 500px"; to eightOfBorder.style = "height: 500px"; 

var i = 0;
var heightOfBorder = document.getElementById('test');

function buttonClick() {
  document.getElementById('incrementValue').value = i++
    heightOfBorder.style = "height: 500px";
}




// document.getElementById("test").style.height =  document.getElementById('incrementValue').value;
#test {
  margin-top: 200px;
  border: solid black;
  width: 200px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Container size change</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>
  <div id="main" class="container">


    <div id="test" class="container" style="height: 50px;">

    </div>

    <button onclick="buttonClick()" id="incrementButton" type="button" class="btn btn-success">Success</button>

    <input id="incrementValue" type="text" name="button" value="0">


  </div>
  <script src="script.js" charset="utf-8"></script>
</body>

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

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

...