How to change width and height using a a textbox and JavaScript-CodePudding

I would like to give the user the chance to change the width and height using a textbox and JavaScript

This is how the HTML looks like and the code below

Here is the code

let cardWidthInput = document.getElementById("card-width").value;
let cardHeightInput = document.getElementById("card-height").value;

document.getElementById("card").style.width = cardWidthInput;
document.getElementById("card").style.width = cardHeightInput;

.card {
  height: 450px;
  width: 300px;
  }

  <body>
    <!-- Card Properties -->
    <div >
      <!-- New Card Button -->
      <div >
        <button type="button" id="newCard" onclick="newCard()">
          Nueva Carta
        </button>
      </div>

      <!-- Card size input boxes -->
      <div >
        <!-- Card Width -->
        <div >
          <label for="card-width">width: </label>
          <input type="text" id="card-width" name="card-width" />
        </div>

        <!-- Card height -->
        <div >
          <label for="card-height">height: </label>
          <input type="text" id="card-height" name="card-height" />
        </div>

        <!-- Submit button from size controllers -->
        <input type="submit" value="Submit" id="bntSubmit" />
      </div>
    </div>

    <!-- Game card -->
    <div >
      <div ></div>
      <div ></div>
      <div ></div>
    </div>
  </body>

Please let me know what am I doing wrong and how to solve it. Thanks

CodePudding user response：

The JavaScript code needs to be wrapped in a function that is called by the Submit button.

 <input type="submit" value="Submit" id="bntSubmit" onclick="changeSize()" />

And to get an element by class you can use the .querySelector() function. When setting the card's width and height, the 'px' also needs to be included:

function changeSize() {
  let cardWidthInput = document.getElementById("card-width").value   "px";
  let cardHeightInput = document.getElementById("card-height").value   "px";
  let card = document.querySelector(".card");
  card.style.width = cardWidthInput;
  card.style.height = cardHeightInput;
}

CodePudding user response：

If you simply want to specify the height and font size,use CSS or style attributes,e.g.//in your CSS file or tag #textbold{height:200px;font-size:14pt;} <input id="textboxid"...>