Замена строки в функции

163
21 января 2021, 15:40

У меня есть функция, которую я хочу применить ещё раз в другом месте, но у неё будет отличие всего-лишь в одной строке. Можно ли как-то заменить эту строку, не копируя всю функцию? Строку input.setAttribute('value', li[i]); хочу заменить на input.setAttribute('value', document.getElementById("new_meaning").value);

function replaceElem() {
            let sistersLi = ol.childNodes;
            console.log(sistersLi);
            for (let i = 0; i < sistersLi.length; i++) {
                let sisters_Li = sistersLi[i];
                sisters_Li.style.cssText = 'cursor:pointer;width:500px';
                let input = document.createElement('input');
                input.setAttribute('type', 'text');
                input.setAttribute('class', 'strange');
                input.setAttribute('value', li[i]);
                sisters_Li.addEventListener('click', function (evt) {
                    //evt.currentTarget - li, находим все спаны
                    let span = evt.currentTarget.querySelector('span');
                    if (span) {
                        //если спан найден, то делаем замену
                        evt.currentTarget.replaceChild(input, span);
                        //при отсутствии blur
                        input.addEventListener('blur', function () {
                            let newSpan = document.createElement('span');
                            newSpan.innerHTML = input.value;
                            sisters_Li.replaceChild(newSpan, input);
                        });
                    }
                    input.focus();
                });
            }
        }
        replaceElem();
Answer 1

Для этого есть параметры функции) Но т.к. у вас li[i], а он в момент вызова функции еще не определен, можно задать её в виде строки, в 'кавычках'. А потом использовать eval() - он берет любую строку и выполняет как код. Поэтому вместо eval('li[i]') в этом месте кода появится просто li[i]

replaceElem('li[i]');
replaceElem('document.getElementById("new_meaning").value');
function replaceElem(bubu) {
  let sistersLi = ol.childNodes;
  console.log(sistersLi);
  for (let i = 0; i < sistersLi.length; i++) {
    let sisters_Li = sistersLi[i];
    sisters_Li.style.cssText = 'cursor:pointer;width:500px';
    let input = document.createElement('input');
    input.setAttribute('type', 'text');
    input.setAttribute('class', 'strange');
    input.setAttribute('value', eval(bubu) ); /* <---  */
    console.log(bubu);
    sisters_Li.addEventListener('click', function (evt) {
      let span = evt.currentTarget.querySelector('span');
      if (span) {
        evt.currentTarget.replaceChild(input, span);
        input.addEventListener('blur', function () {
          let newSpan = document.createElement('span');
          newSpan.innerHTML = input.value;
          sisters_Li.replaceChild(newSpan, input);
        });
      }
      input.focus();
    });
  }
}

Но eval не рекомендуется использовать, если строка-код может быть получен от пользователя. Мало ли что могут подсунуть...

READ ALSO
Всплытие jquery

Всплытие jquery

Не могу понять что не такВроде запретил всплытие события, но "не работает"

129
Передача значения из input в button React

Передача значения из input в button React

Есть поле, в котором прописан статический путь формирования файлаЯ сделал это поле редактируемым на случай, если пользователь захочет по своему...

125
Проверка отправки формы Wordpress/Divi

Проверка отправки формы Wordpress/Divi

Есть сайт на Wordpress (на конструкторе Divi), при отправке формы надо выводить попап "спасибо за обращение"У формы есть встроенный валидатор, к коду...

160