2014-02-13 3 views
2

Я нахожусь в своем втором семестре в ГКЦБ и в настоящее время беру вводный курс по информатике. Мы переходим к основам HTML и Javascript.Javascript - нажатие кнопки проверки с помощью оператора If

В последней лаборатории, в которой я работал, была кнопка, чтобы изменить грустное лицо на счастливое лицо. Тем не менее, мне было интересно, можно ли проверить, нажали ли вы кнопку, если это так, используя инструкцию If, она выступит с предупреждением: «Ты заставил меня улыбнуться!»

<html> 
<head> 
<title>Are you sad?</title> 
</head> 

<body> 

<div style="text-align:center"> 
<img id="sadFace" src="http://balance3e.com/Images/sad.gif"> 
<p> 

<input type="button" value="Smile" 
    onclick="document.getElementById('sadFace').src='http://balance3e.com/Images/happy.gif'; 
    alert('You made me smile!');"> 
</p> 
</div> 

</body> 
</html> 

В настоящее время программа будет отображать предупреждение, когда я нажимаю кнопку (это было для дополнительного кредита). Тем не менее, я хотел бы проверить, нажата ли кнопка уже нажата, если она отобразит предупреждение.

+3

'if (document.getElementById ('sadFace'). Src == 'http://balance3e.com/Images/happy.gif') {alert ('clicked')}'. Я надеюсь, что ответ на ваш вопрос – Satpal

+0

Проверьте изображение src. – Musa

+0

Спасибо, это очень помогает! – mccdlibby

ответ

1

Вот мой способ:

onclick= "if(i== 0) 
     { 
      document.getElementById('sadFace').src='http://balance3e.com/Images/happy.gif'; 
      i++; 
      } 
      else 
      { 
      alert('You made me smile!'); 
      }" 

Конечно, вы должны определить переменную i и сначала установить его значение в ноль.

+0

@mccdlibby Я бы только отметил, что это плохая практика поместить JavaScript прямо в ваш HTML, особенно когда это так долго. Я знаю, что это всего лишь упражнение, но просто так вы знаете ... – woz

+0

Спасибо за совет. Я буду помнить об этом в будущем! – mccdlibby

1

Вам нужно создать переменную, которая будет отслеживать, была ли эта кнопка нажата. Возможно, вызовите эту переменную «isPressed» и установите для ее значения по умолчанию значение false. Когда вы нажимаете кнопку, если значение переменной равно false, установите для нее значение true. В противном случае сообщите свое сообщение.

2

Я хотел бы сделать это следующим образом:

<html> 
<head> 
    <title>Are you sad?</title> 

    <script> 

     function changeFace() { 

      if(document.getElementById('sadFace').src == 'http://balance3e.com/Images/happy.gif') { 
       alert('You made me smile!'); 
      } 

      document.getElementById('sadFace').src='http://balance3e.com/Images/happy.gif'; 

     } 

    </script> 

</head> 
<body> 

    <div style="text-align:center"> 
    <img id="sadFace" src="http://balance3e.com/Images/sad.gif"> 
    <p> 
     <input type="button" value="Smile" onclick="changeFace()"> 
    </p> 
    </div> 

</body> 
</html> 
+0

Спасибо за ответ. Мне нравятся все разные способы решения одной и той же проблемы. – mccdlibby

1
<html> 
<head> 
<title>Are you sad?</title> 
</head> 
<script>var i =0;</script> 
<body> 

<div style="text-align:center"> 
<img id="sadFace" src="http://balance3e.com/Images/sad.gif"> 
<p> 

<input type="button" value="Smile" 
    onclick=" 
    if(i == 0){ 
i=1; 
document.getElementById('sadFace').src='http://balance3e.com/Images/happy.gif'; 
alert('You made me smile!'); 
}"> 
</p> 
</div> 

</body> 
</html> 
1

Попробуйте

onClick = "if(document.getElementById('sadFace').src ==     
      'http://balance3e.com/Images/happy.gif') 
      { 
       alert('You made me smile!'); 
      }" 
Смежные вопросы