1

Код:

numbers:<input id="numbers">
<br>
<button id="qqq">Search</button>
<hr>
<p id="min">min:</p>

<script>
  var inputElements = document.getElementById('numbers').value;
  var min ;
  //var nnn = 1000;

  document.getElementById('min').innerHTML += inputElements; //если вместо inputElements написать nnn, то выведет 1000(значение nnn)
  var inputElementsArray = inputElements.split(' ');
  document.getElementById('qqq').alert(Math.max(inputElementsArray);
</script>

Скажу сразу, что я пересмотрел вопросы по поводу передачи данных html -> js -> html , вот написал код ....но не пойму что не так?

П.С.:переменной inputElements присваиваем значение, которое было введено в поле input (строку разбили на массив), а потом нажимаем на кнопку и в указанном поле должно вывести максимальное число элемента массива,но не выводит.... (если вместо inputElements написать nnn, то выведет 1000(значение nnn))

1
  • 1
    document.getElementById('qqq').alert(Math.max(inputElementsArray); - это неверная конструкция, у элемента нет метода alert
    – ThisMan
    27 июн 2017 в 12:15

2 ответа 2

4
  1. вам нужно получать значения при клике на кнопку, а не при загрузке скрипта;
  2. вы не повешали обработчик события по нажатию на кнопку;
  3. при "разрезании" строки .split() возвращается массив строк, которые вам надо конвертировать в число каждый (нам помогает .map() для перебора массива и + для конвертации строки в число);
  4. Math.min() не может получать массив чисел. Можно воспользоваться Math.min.apply(null, array);
  5. и в конце просто присвоить элементу значение через .innerHTML = value.

document.getElementById('qqq').onclick = function() {
  var numbers = document
    .getElementById('numbers')
    .value
    .split(' ');
  document.getElementById('min').innerHTML = Math.min.apply(null, numbers);
}
numbers:<input id="numbers">
<br>
<button id="qqq">Search</button>
<hr>
<p id="min">min:</p>

Или используя ES6:

document.getElementById('qqq').onclick = () => {
  var numbers = document
    .getElementById('numbers')
    .value
    .split(' ');
  document.getElementById('min').innerHTML = Math.min(...numbers);
};
numbers:<input id="numbers">
<br>
<button id="qqq">Search</button>
<hr>
<p id="min">min:</p>

2
  • 1
    про + даже не знал, отличный опыт! Math.min() не может получать массив чисел - может, через деструктивное присваивание.
    – NeedH8
    27 июн 2017 в 12:35
  • Или используя ES6 - Тогда уж и Math.min.apply надо было заменить на spread operator: Math.min(...numbers). Кстати, .map(val => +val) делать не обязательно, аргументы Math.min и так будут приведены к числу
    – Grundy
    5 июл 2017 в 11:10
4

И мой вариант ответа:

let numbers = document.getElementById('numbers');
let search = document.getElementById('qqq');
let result = document.getElementById('min');

search.addEventListener('click', function() {
	let arr = numbers.value.split(' ').map(el=> {
		return Number(el);
	})	
	result.innerText = Math.max(...arr)
})
numbers:<input id="numbers" type="text" value="10 20 50 5">
<br>
<button id="qqq">Search</button>
<hr>
max:<p id="min"></p>

4
  • 1
    Красивое решение передачи массива в .min(). Не слышал о таких, круто :)
    – MihailPw
    27 июн 2017 в 12:36
  • 1
    К слову, если вы пользуетесь ES6, то el => { return Number(el); } можно сократить как el => Number(el)
    – MihailPw
    27 июн 2017 в 12:37
  • 1
    не могу, из-за того же деструктивного присваивания. Если не возвращать значение не сработает. Или я чего-то не понимаю еще...
    – NeedH8
    27 июн 2017 в 12:40
  • 2
    посмотрите мой ответ внизу, я обновился
    – MihailPw
    27 июн 2017 в 12:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.