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

Question

I need to add a single JavaScript statement in the function clickHandler() to make sure the input from the text boxes form a border around the first paragraph. I know that the getElementById only accepts one element not multiple however this approach is also not working. Would very much appreciate any help. This is all the code involved.

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

You didn’t close your selector string. And `NodeList`s don’t have a `value`. — Sebastian Simon, Sep 11 '18 at 03:25
Possible duplicate of [What do querySelectorAll, getElementsByClassName and other getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-getelementsbyclassname-and-other-getelementsby-method) — Sebastian Simon, Sep 11 '18 at 03:25

score 0 · Answer 1 · answered Sep 11 '18 at 03:28

You might use Array.from to transform a NodeList of each input into an array of each input's values, then join by spaces:

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>

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

1 Answers1