#javascript #html
#javascript #HTML
Вопрос:
Я использую базовый javascript, который позволяет пользователю нажимать кнопку для изменения цвета текста; но при использовании 4 раза кнопка не меняет цвет.
Вот мой код изменения цвета. Я не знаю, как остановиться с 4 раза.
status = 1;
function changeColour(){
getText = document.getElementById("text");
if(status==1) {
getText.style.color = 'blue';
status = 2;
}else if(status==2) {
getText.style.color = 'red';
status = 1;
}
} <h1 id= "text" align = "center"><b>Hello World</b></h1>
<button style="margin-left:auto;margin-right:auto;display:block" type="button" onclick="changeColour()">Click</button> Спасибо всем
Комментарии:
1. установите счетчик вне changeColour равным 0 и увеличьте его в changeColour. Оберните в оператор if.
2. Ваш вопрос довольно неоднозначен. Вы хотите, чтобы текст перестал менять цвет, начиная с 4-го щелчка, или вы хотите пропустить изменение цвета при каждом 4-м щелчке?
3. И вы хотите вернуться к исходному цвету при 4-м нажатии?
4. Другой вопрос: должны ли мы прекратить менять цвет, начиная с или после 4-го щелчка
5. Дорогой С.Шампань. На самом деле, я хочу прекратить менять цвет с 4-го щелчка.
Ответ №1:
var status = 1;
var counter = 0;
function changeColour(){
counter ;
if (counter < 4) {
getText = document.getElementById("text");
if(status==1) {
getText.style.color = 'blue';
status = 2;
}else if(status==2) {
getText.style.color = 'red';
status = 1;
}
}
}
Ответ №2:
Вам просто нужно установить counter вне функции
var status = 1;
var counter = 0;
function changeColour() {
if (counter == 4)
return;
counter ;
getText = document.getElementById("text");
if (status == 1) {
getText.style.color = 'blue';
status = 2;
} else if (status == 2) {
getText.style.color = 'red';
status = 1;
}
} <html>
<head>
<title>Hello World</title>
</head>
<body>
<h1 id="text" align="center"><b>Hello World</b></h1>
<button style="margin-left:auto;margin-right:auto;display:block" type="button" onclick="changeColour()">Click</button>
</body>
</html> Ответ №3:
Используйте nbr_clicks переменную для подсчета кликов и max_clicks для установки разрешенных максимальных кликов, затем добавьте условие в начало вашей функции :
status = 1;
nbr_clicks = 0;
max_clicks = 4;
function changeColour(){
if(nbr_clicks<max_clicks)
{
nbr_clicks ;
getText = document.getElementById("text");
if(status==1) {
getText.style.color = 'blue';
status = 2;
}else if(status==2) {
getText.style.color = 'red';
status = 1;
}
}
} <h1 id= "text" align = "center"><b>Hello World</b></h1>
<button style="margin-left:auto;margin-right:auto;display:block" type="button" onclick="changeColour()">Click</button> Комментарии:
1. У вас 4 вопроса, и ни один не принят…. пожалуйста, если ответ — это то, что вы ищете, отметьте его как правильный ответ
Ответ №4:
Просто добавьте счетчик.
<html>
<head>
<title>Hello World</title>
<script language= "javascript">
var status = 1;
var count = 0;
function changeColour(){
getText = document.getElementById("text");
if(count<4){
if(status==1) {
getText.style.color = 'blue';
status = 2;
}else if(status==2) {
getText.style.color = 'red';
status = 1;
}
count ;
}else{
alert("You already clicked 4 times.");
}
}
</script>
</head>
<body>
<h1 id= "text" align = "center"><b>Hello World</b></h1>
<button style="margin-left:auto;margin-right:auto;display:block" type="button" onclick="changeColour()">Click</button>
</body>
</html> Ответ №5:
status = 1,clk = 0
function changeColour(){
if(clk<4)clk ;
else return;
getText = document.getElementById("text");
if(status==1) {
getText.style.color = 'blue';
status = 2;
}else if(status==2) {
getText.style.color = 'red';
status = 1;
}
} <h1 id= "text" align = "center"><b>Hello World</b></h1>
<button style="margin-left:auto;margin-right:auto;display:block" type="button" onclick="changeColour()">Click</button> Ответ №6:
Просто новый рабочий и более короткий ответ с % оператором
var counter = 1;
var MAX_CLICKS = 4;
function changeColour() {
var textElem = document.getElementById("text");
if (counter < MAX_CLICKS ) {
textElem.style.color = (counter % 2)? 'blue' : 'red';
counter ;
}
} <h1 id="text" align="center"><b>Hello World</b></h1>
<button style="margin-left:auto;margin-right:auto;display:block" type="button" onclick="changeColour()">Click</button> Ответ №7:
Вы можете проверить четный и нечетный щелчок на % 2 и увеличивающийся status , также можете проверить, что щелчок 4 раза.
<script language= "javascript">
status = 1;
function changeColour(){
getText = document.getElementById("text");
if(status % 2 != 0) {
getText.style.color = 'blue';
status ;
}else if(status == 4) {
getText.style.color = '';
status = 1;
}
else {
getText.style.color = "red";
status ;
}
}
</script>
Комментарии:
1. Почему вы удаляете цвет при четвертом нажатии?
2. Он спросил
when use clicked 4times , the button does not change colour.3. Точно!
getText.style.color = '';меняет цвет еще раз. Кроме того, ваш код не работает, потому что вы устанавливаетеstatusзначение 1 при 4-м нажатии, поэтому цвет все равно можно изменить впоследствии.4. Он не хочет менять цвет при каждом 4-м нажатии!! Это мой ответ.
5. Я не понял вопрос таким образом, и я признаю, что вопрос довольно неоднозначный. В любом случае, при 4-м щелчке текст снова становится черным, и это изменение цвета.
Ответ №8:
status = 0;
function changeColour(){
getText = document.getElementById("text");
if(status < 4) {
getText.style.color = (getText.style.color==="blue")?'red':'blue';
status = status ;
}
}
Комментарии:
1. Это не ошибка, но
colorпеременная не используется. Я думаю, что стоит использовать этот способgetText.style.color = (getText.style.color===color)?'red':color;2. Отредактировано! удалена переменная цвета.