簡體   English   中英

編寫1條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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM