Блог

Главная - Вопросы по программированию - проблема с запуском события с помощью функции.bind()

проблема с запуском события с помощью функции.bind()

#javascript

#javascript

Вопрос:

Всем добрый день, у меня возникли проблемы с активацией этой функции: function clickMe(){return this.color="red"} , внутри объекта. это должно быть вызвано кнопкой, вот код:

 script>
    var btn = document.querySelector("#btn");
    var txt = document.querySelector("#txt");
    btn.addEventListener("click",activeNewColor)
    
    var objCss ={fontsize:"40px",
              color:"pink",
            click: function clickMe(){return this.color="red"}
            }
    let colorRed=objCss.click.bind(objCss);
    
    var activeNewColor= () =>{

        return colorRed()
        }

    //activeNewColor()

    Object.assign(txt.style, objCss); 
</script>

Комментарии:

1. Такой странный код… Чего вы хотите достичь? Если вы нажмете кнопку, то #btn и #txt должны изменить цвет на красный? Или только кнопка? Или только текст?

2. да, извините за беспорядок, только #txt…

3. Почему бы не сделать это —> btn.addEventListener('click', () => txt.style.color = 'red'); ? То, что вы пытаетесь сделать, может быть сделано с помощью трех строк кода.

4. Почему бы не использовать библиотеку javascript или плагин jQuery и просто использовать предопределенные функции вместо ваших функций? Вы можете определять функции в прослушивателях событий

Ответ №1:

Нравится это?

 function buttonClicked() {
  const txt = document.getElementById('txt');
  txt.style.color = 'red';
}  
 button {
  color: green;
}

textarea {
  width: 100%;
  height: 100px;
  font-size: 40px;
  color: pink;
}  
 <div><button id="btn" onclick="buttonClicked()">Click me</button></div>
<textarea id="txt">Example text</textarea>

Ответ №2:

Вы можете приписать стиль разным классам и использовать classList.toggle для удаления / добавления класса из элемента, например, так :

 var txt = document.querySelector("#txt");

function changeColor() {
  txt.classList.toggle('pink');
  txt.classList.toggle('red');
}  
 #txt {
  font-size: 14px;
}

#txt.pink {
  color: pink;
}
  
#txt.red {
  color: red;
}  
 <button id="btn" onclick="changeColor()">Change text color</button>
<span id="txt" class="pink">text</span>