Блог

Я новичок в JavaScript, и я пытался изменить цвет текстовой строки на своем веб-сайте, когда я нажимаю на нее с помощью JS, я знаю, что есть способы сделать это только с помощью CSS, но я хотел бы попрактиковаться в JS, это то, что я пытался до сих пор:

У меня есть этот список:

 function white() {
  const input = document.getElementById("weekly");
  input.style.color = "white";
} 

 <ul>
  <li><a id="weekly" href="/index.html" onclick="white()">Weekly</a></li>
</ul> 

Это более длинный список, но я не хотел, чтобы это выглядело беспорядочно 🙂

Я хочу изменить цвет «Еженедельно», когда на него нажимают, и это то, что я пробовал: я уже некоторое время пытаюсь, и это лучшее, что я придумал, но, похоже, не работает.

Хотя только на долю секунды текст тега привязки действительно стилизован для отображения в виде белого текста. Ваш тег привязки переносит пользователя /index.html , и, таким образом, эффект не виден до тех пор, пока пользователь находится на странице. Чтобы избежать перенаправления, установите href для атрибута значение # :

   function white() {
    const input = document.getElementById("weekly");
    input.style.color = "white";
  } 

 <ul>
  <li><a id="weekly" href="#" onclick="white()">Weekly</a></li>
</ul> 

обычно <a> теги перенаправляют вас на ссылку, но вы можете избежать перенаправления, а затем применить пользовательскую функцию к <a> тегу с помощью preventDafault функции, которая остановит поведение элемента по умолчанию

 function white(event) {
  event.preventDefault()
  const input = document.getElementById("weekly");
  input.style.color = "white";
} 

 <ul>
  <li><a id="weekly" href="/index.html" onclick="white(event,this)">Weekly</a></li>
</ul> 

Ваш тот же самый фрагмент кода работает. Проблема, с которой вы столкнулись, заключается в том, что в вашем <a> теге есть ссылка, то есть переход на, как я предполагаю, ту же страницу, поэтому страница перезагружается, и ссылка снова становится черной. Смотрите вслух href (и более заметный цвет):

 function white() {
  const input = document.getElementById("weekly");
  input.style.color = "green";
} 

 <ul>
  <li><a id="weekly" onclick="white()">Weekly</a></li>
</ul> 

Ваш фрагмент кода работает нормально, но может сделать его немного более общим, чтобы вы могли использовать его другими способами, как показано ниже.

 // es6 "fat arrow" one liner
changeColor = (element, color) => element.style.color = color;

// maybe more familiar
// function changeColor(element, color) {
//  element.style.color = color;
// } 

 <ul>
  <li><a id="weekly" href="#" onclick="changeColor(this, 'red')">Weekly</a></li>
  <li><a id="daily" href="#" onclick="changeColor(this, 'blue')">Daily</a></li>
  <li><a id="hourly" href="#" onclick="changeColor(this, 'green')">Hourly</a></li>
</ul>