How to change width and height using a a textbox and JavaScript
Question
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 class="propiedades"> <:-- New Card Button --> <div class="btn-nueva-carta"> <button type="button" id="newCard" onclick="newCard()"> Nueva Carta </button> </div> <!-- Card size input boxes --> <div class="inputs"> <!-- Card Width --> <div class="card-width"> <label for="card-width">width: </label> <input type="text" id="card-width" name="card-width" /> </div> <!-- Card height --> <div class="card-height"> <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 class="card"> <div class="figura"></div> <div class="valor"></div> <div class="figura invertida"></div> </div> </body>Please let me know what am I doing wrong and how to solve it. Thanks
2 answers
solution1
0 2022-12-28 17:37:26
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;
}
solution2
0 2022-12-28 18:13:37
If you simply want to specify the height and font size,use CSS or style attributes,eg//in your CSS file or tag #textbold{height:200px;font-size:14pt;} <input id="textboxid"...>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.