![](/img/trans.png)
[英]How to change text of a paragraph when submit button is clicked in JavaScript
[英]Write 1 JavaScript Statement that will take text from the text boxes and use it to set the border of the paragraph when the button is clicked
我需要在函數clickHandler()中添加一條JavaScript語句,以確保來自文本框的輸入在第一段周圍形成邊框。 我知道getElementById僅接受一個元素而不是多個元素,但是這種方法也不起作用。 非常感謝您的幫助。 這就是所有涉及的代碼。
<head>
<script>
function clickHandler(){
document.getElementById('para1').style.border =
document.querySelectorAll('#size, #style, #colour).value;
}
</script>
</head>
<body>
<h1>Introduction to JavaScript</h1>
<p id="para1">JavaScript is also known as ECMAScript.</p>
<p>Size:
<input type="text" id="size">
</p>
<p>Style:
<input type="text" id="style">
</p>
<p>Colour:
<input type="text" id="colour">
</p>
<button type="button" onclick="clickHandler()" value="Change style">Change style</button>
您可以使用Array.from
將每個輸入的NodeList
轉換為每個輸入值的數組,然后按空格連接:
function clickHandler() { document.getElementById('para1').style.border = Array.from( document.querySelectorAll('input'), input => input.value ).join(' '); }
<p id="para1">JavaScript is also known as ECMAScript.</p> <p>Size: <input type="text" id="size" placeholder='5px'> </p> <p>Style: <input type="text" id="style" placeholder='solid'> </p> <p>Colour: <input type="text" id="colour" placeholder='green'> </p> <button type="button" onclick="clickHandler()" value="Change style">Change style</button>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.