Нажмите дважды на два события onClick

Question

Возможно ли иметь одно событие onClick, при первом щелчке он использует одну функцию, а второй - другой?

например.

<p id="demo" onclick="goRed(), goBlue()">Click me to change my text color.</p> 

<script> 
    function goRed() { 
     document.getElementById("demo").style.color = "red"; 
    } 
    function goBlue() { 
     document.getElementById("demo").style.color = "blue"; 
    } 
</script> 

Могу ли я сделать это так, функция OnClick использует боднул(), а затем goBlue() после второго щелчка? Thanks

Answer 1

<p id="demo" onclick="goRed()"> Click me to change my text color.</p> 

<script> 
    function goRed() { 
     document.getElementById("demo").style.color = "red"; 
     this.onclick = goBlue; 
    } 
    function goBlue() { 
     document.getElementById("demo").style.color = "blue"; 
     this.onclick = goRed; 
    } 
</script> 

Это сделает это. Но это не приятно. Поэтому мы можем обновить это:

Сначала применим обработчик событий. Они являются стандартом. Старайтесь избегать встроенных обработчиков событий.

document.getElementById("demo").addEventListener("click", goRed, false); 
 

 
    function goRed(e) { 
 
     this.style.color = "red"; 
 
     //this refers to the element. 
 
     this.removeEventListener("click", goRed, false); //remove the event listener 
 
     this.addEventListener("click", goBlue, false); //add the blue one. 
 
    } 
 
    function goBlue(e) { 
 
     this.style.color = "blue"; 
 
     this.removeEventListener("click", goBlue, false); //remove the event listener 
 
     this.addEventListener("click", goRed, false); //add the Red one. 
 
    }

<p id="demo" > Click me to change my text color.</p>

Я выбрал не выполнять одну функцию для изменения цвета, так как я хотел, чтобы сделать этот ответ более общий характер. Это правильный способ изменить обработчик события элемента внутри функции на другую функцию. Изменение цвета - всего лишь пример. Можно представить себе другие случаи, когда функциональная ссылка ссылки или кнопки должна быть изменена после выполнения функции.

Answer 2

Просто используйте одну функцию, но переключаться между разными цветами в этой функции:

function toggleColor() { 
 
    var el = document.getElementById("demo"); 
 
    
 
    if (!el.style.color || el.style.color == "blue") 
 
    el.style.color = "red"; 
 
    
 
    else 
 
    el.style.color = "blue"; 
 
}

<p id="demo" onclick="toggleColor()">Click me to change my text color.</p>

Здесь мы устанавливаем color на «красный», если элемента color в настоящее время «синий» или еще не установлен. В противном случае мы устанавливаем его на «синий».

Answer 3

также вы можете сделать это с помощью switch

function toggleColour() { 
var color=document.getElementById("demo").style.color; 
switch(color){ 
case "red": 
     color.style.color = "blue"; 
     break; 
case "blue": 
     color.style.color = "red"; 
     break; 
default : 
    console.log("the color are not posible to change"); 
    break; 
    } 
} 

добавить это в ваш HTML файл

<p id="demo" onclick="toggleColour()">Click me to change my text color.</p>