Напишите 1 оператор JavaScript, который будет брать текст из текстовых полей и использовать его для установки границы абзаца при нажатии кнопки - PullRequest
Новая
       20

Напишите 1 оператор JavaScript, который будет брать текст из текстовых полей и использовать его для установки границы абзаца при нажатии кнопки

0 голосов
/ 11 сентября 2018

Мне нужно добавить один оператор JavaScript в функцию clickHandler (), чтобы убедиться, что входные данные из текстовых полей образуют рамку вокруг первого абзаца. Я знаю, что 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>

1 Ответ

0 голосов
/ 11 сентября 2018

Вы можете использовать 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>
...