0

И сразу к делу! Задача : есть исходный массив(очень простой), инпут , кнопка , и квадратик! Мне нужно, чтобы когда я применял метод arr.forEach()(вводя его в инпут) и нажимал после этого кнопку, квадратик становился зелёным, ЕСЛИ ЖЕ код, введённый мною не верный, то квадратик окрашивался в красный цвет!

Я уже перепробовал много способов, то, что вы видите ниже, можно вставить прямиком в codepen, ну или как хотите, скажем так , этот код это уже крик отчаяния!

Итак, моя логика. . . (последнее , что уже пришло в голову)

Финальный результат - это преобразование исходного массива ( [1,2,3] ) к ( [10,20,30] ), казалось бы , нужно просто применить к каждому элементу массива ...*10, очень простая задача, для этого прописываю в инпуте. arr.forEach(function(element, index, array){array[index]=element*10}) , тем самым (на сколько я знаю) я изменяю значения исходного массива (array[index]=element*10) , выполняя операцию присваивания, ведь так? Далее, я создал переменную(больше от отчаяния и собственной беспомощности), чтобы уже наверняка сравнивать результат, назвал её var best=[10,20,30](конечный результат, преобразования массива через тот форыч, который я написал выше), так? В теле обработчика события клика по кнопке я прописал условие, что приведённые к общему ТЕКСТОВОМУ значению arr и best должны быть вроде -бы равны , то-есть блок if(arr.toString()===best.toString()) должен вернуть true, и соответственно квадратик должен стать зелёным (условие прописано в теле if()-блока) , но этого как вы уже поняли не происходит! Я так-же пытался прописывать в if()-блоке инструкцию if(eval(si.value)==="10,20,30"), то-же не помогло! В общем я чот уже запутался. Убедительная просьба , если у вас есть время, объяснить почему мой код не работает , на нативном js а не на jquery (его я вообще пока ещё не бум бум) ! Спасибо за внимания, буду рад услышать ответы!

var arr = [1,2,3];
var si = document.getElementById("some-input");
var btn = document.getElementById("some-btn");
var kv = document.getElementById("kvadratik");
var best=[10,20,30]

btn.onclick=function(){
  if(arr.toString()===best.toString()){
    kv.style.background="green";
  }else{
    kv.style.background="red";
  }
};
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrapper{
  position: relative;
  margin: 20px;
}

.some-input{
  display: inline-block;
  width: 350px;
  height: 30px;
  vertical-align: middle;
  padding: 0px 15px;
  letter-spacing: 1.5px;
  font-weight: bold;
}

.some-btn{
  display: inline-block;
  width: 100px;
  height: 30px;
  vertical-align: middle;
}

.kvadratik{
  display: block;
  width: 50px;
  height: 50px;
  border: 1px solid;
  margin-top: 10px;
}
<div class="wrapper">
    <h3>Исходный массив : </h3><br>
    <p>arr = [ 1 , 2 , 3 ]</p><br>
    <input type="text" class="some-input" id="some-input" placeholder="Поле..">
    <input type="button" class="some-btn" id="some-btn" value="Кнопка">
    <div class="kvadratik" id="kvadratik"></div>
</div>    

};


Хм, продолжаю тему того, что мне нужно сделать, чтобы было понятнее! Этот пример прям тютя в тютю покажет то, что я хочу! Итак, когда мы вводим что-либо в инпут, то запускается функция эвал(по нажатию разумеется), и превращает то, что мы вводим в КОД!Например. 1) 1+1 в нашем квадратике появляется 2 2) arr.reverse()в нашем квадратике появляется перевёрнутый массив 3) arr.sort(function(value){return value>2}) в нашем квадратике появляется 3(т.к она одна удовлетворяет требованиям) НО БЛИН, когда я ввожу arr.forEach(function(element, index, array){array[i]=element*10}) возвращается undefined. . . ПОЧЕМУ? Вот что мне собственно и нужно узнать . . . Почему функция эвал прекрасно понимает другие методы, которые я пишу, НО напрочь октазывается понимать forEach()? Поправьте пожалуйста , если я где-то допускаю ошибку!

var arr = [1,2,3];
var si = document.getElementById("some-input");
var btn = document.getElementById("some-btn");
var kv = document.getElementById("kvadratik");
var best=[10,20,30];


btn.onclick=function(){
  kv.innerHTML=eval(si.value)
};
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrapper{
  position: relative;
  margin: 20px;
}

.some-input{
  display: inline-block;
  width: 350px;
  height: 30px;
  vertical-align: middle;
  padding: 0px 15px;
  letter-spacing: 1.5px;
  font-weight: bold;
}

.some-btn{
  display: inline-block;
  width: 100px;
  height: 30px;
  vertical-align: middle;
}

.kvadratik{
  display: block;
  width: 250px;
  height: 50px;
  border: 1px solid;
  margin-top: 10px;
}
<div class="wrapper">
    <h3>Исходный массив : </h3><br>
    <p>arr = [ 1 , 2 , 3 ]</p><br>
    <input type="text" class="some-input" id="some-input" placeholder="Поле..">
    <input type="button" class="some-btn" id="some-btn" value="Кнопка">
    <p class="kvadratik" id="kvadratik"></p>
</div>    

5
  • а каким образом в Вашем коде forEach применяется к исходному массиву? где это прописано? 12 апр 2019 в 9:55
  • и что Вы вообще хотите проверять после нажатия на кнопку? правильно ли заполнен инпут? так для этого ничего не надо сделать с массивом - просто значение проверяйте. или как это у Вас работает? 12 апр 2019 в 9:58
  • А где у вас код, который отвечает за преобразование текста из инпута в код? 12 апр 2019 в 10:04
  • а как вообще сделать чтобы код применялся к исходному массиву по клику? Я просто подобный пример уже реализовывал через eval(si.value) - получалось что функция eval преобразовывала то, что я написал в инпуте в код, и он выполнялся, а уже потом я сравнивал получившееся значение с [10,20,30] , хотя результата тоже не было.
    – Muranx
    12 апр 2019 в 11:12
  • Что я необходимо ввести в инпут, чтоб kvadratik становился зеленый после клика ?
    – Lukas
    12 апр 2019 в 14:15

1 ответ 1

1

Ну, собственно, назначение Вашего eval, согласно задания, изменить массив arr. Вот его и выводите после eval. A arr.forEach никакой результат не возвращает, совсем...

Для тестирования можно вводить вашу конструкцию (только ошибку в ней исправить i -> index)

arr.forEach(function(element, index, array){array[index]=element*10})

Или что попроще:

arr = [10,20,30]

И, кстати, следует восстанавливать значение arr после каждой попытки.

И помните, через eval() можно весь скрипт кувырком послать...

var arr = [1, 2, 3];
var si = document.getElementById("some-input");
var btn = document.getElementById("some-btn");
var kv = document.getElementById("kvadratik");
var best = [10, 20, 30];


btn.onclick = function() {
  eval(si.value)
  kv.innerHTML = arr;
  if (arr.toString() === best.toString()) {
    kv.style.background = "green";
  } else {
    kv.style.background = "red";
  }
  arr = [1, 2, 3];
};
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrapper {
  position: relative;
  margin: 20px;
}

.some-input {
  display: inline-block;
  width: 350px;
  height: 30px;
  vertical-align: middle;
  padding: 0px 15px;
  letter-spacing: 1.5px;
  font-weight: bold;
}

.some-btn {
  display: inline-block;
  width: 100px;
  height: 30px;
  vertical-align: middle;
}

.kvadratik {
  display: block;
  width: 250px;
  height: 50px;
  border: 1px solid;
  margin-top: 10px;
}
<div class="wrapper">
  <h3>Исходный массив : </h3><br>
  <p>arr = [ 1 , 2 , 3 ]</p><br>
  <input type="text" class="some-input" id="some-input" placeholder="Поле..">
  <input type="button" class="some-btn" id="some-btn" value="Кнопка">
  <p class="kvadratik" id="kvadratik"></p>
</div>

3
  • Sergey Nudnov, спасибо ! Работает, правда несколько нюансов. Уже не первый раз вижу, что окружающие относятся с недоверием к этой eval() , с чем это связанно, она же просто вычисляет то, что написанно в текстовом режиме , или нет? И второй вопрос чуть по прощще, какая обязательно ли прописывать return array[index]=element*10 ? Почему раздницы судя по зелёному квадратику нету? с инструкцией return и без неё?
    – Muranx
    12 апр 2019 в 23:54
  • Пока eval используется для обработки кода текущего пользователя, и нет шансов, что ввод одного пользователя будет показан с использованием eval другому, то оно вполне допустимо. А насчет return, так он же нигде и не прописан. Или я не понял вопрос? Кстати, если мой ответ выше Вас удовлетворил, то пометьте его, пожалуйста, как принятый ответ, нажав на v под счетчиком голосов 13 апр 2019 в 2:07
  • Sergey Nudnov, упс, извини, не вкурсе был про этот "лайк" , поставил, всё работает, как вы и посоветловали.
    – Muranx
    13 апр 2019 в 2:51

Ваш ответ

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

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