CODEWITHSUNDEEP
javascripthtmlcss
user12997013
user12997013

Reputation:

Javascript adjustments

I'm new to Javascript so forgive the rudimentary code. Is there some way I could get the code to print with the specified adjustments from the user input?


<!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>

Upvotes: 2

Views: 183

Answers (2)

mithushancj
mithushancj

Reputation: 96

Do checkout this codepen for a demo : 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>

To explain you the code

I have created two function using javascript called "adjustSize" and "changeBoxSize"

The adjustSize function is responsible to getting the values from the relevant input fields and pass it to the "changeBoxSize". The function is triggered during the "onclick", that is when the button with the attribute id of "size_btn" is clicked

The changeBoxSize function takes in as parameters the width and height, and the assigned the css styles of the height and width by selecting div element of the attribute id "customBox"

Upvotes: 1

Hans Felix Ramos
Hans Felix Ramos

Reputation: 4424

Add an event listener to the button, and get the width and height from the inputs. Then apply styles (width and height) to a 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>

Upvotes: 1

Related Questions