Странное поведение в приложении HTA с тегом «метка»

Итак, вот мой код

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>Test</title>
<script type="text/vbscript">
Function obtn1()
    document.forms("form").btn1.style.display = "none"
    document.forms("form").btn2.style.display = "block"
    msgbox "btn1"
End Function

Function obtn2()
    document.forms("form").btn1.style.display = "block"
    document.forms("form").btn2.style.display = "none"
    msgbox "btn2"
End Function
</script>
</head>
<body>
<form id="form">
    <label>
        <input type="button" value="btn1" onclick="obtn1()" name="btn1" style="display: block;" />
        <input type="button" value="btn2" onclick="obtn2()" name="btn2" style="display: none;" />
    </label>
</form>
</body>
</html>

Его функция очень проста: Отобразите первую кнопку. Когда эта кнопка нажата, показать вторую кнопку и скрыть первую кнопку. При нажатии второй кнопки показать первую кнопку и скрыть вторую кнопку.

Но я не мог заставить его работать. Однако, если я удалю элемент <label> или установлю атрибут for="somethinghere", тогда код будет работать нормально.

Так может ли кто-нибудь сказать мне, что я сделал неправильно? У меня Windows 7 x86 с установленным Internet Explorer 10.


person Teiv    schedule 14.09.2015    source источник
comment
Что вы имеете в виду, когда говорите, что не смогли заставить его работать? Что просходит? Кроме того, зачем вам этикетка? Если его удаление заставляет код работать, зачем оставлять его?   -  person Ashley Strout    schedule 14.09.2015
comment
Просто прочитайте определение и использование ярлыка w3schools.com/tags/tag_label.asp.   -  person R Lam    schedule 14.09.2015
comment
Таким образом, он может щелкнуть по обоим вашим входам, если вы обернете метку, как ваш код.   -  person R Lam    schedule 14.09.2015
comment
Ах, так как этот тег label не имеет указанного элемента формы для привязки, то, когда я нажимаю на него, он запускает обе кнопки. Можете ли вы опубликовать это как ответ, чтобы я мог отметить его как решенный?   -  person Teiv    schedule 14.09.2015


Ответы (2)


Просто поместите свои теги input в разные теги label следующим образом:

<form id="form">
    <label>
        <input type="button" value="btn1" onclick="obtn1()" name="btn1" style="display: block;" />
    </label>    
    <label>
        <input type="button" value="btn2" onclick="obtn2()" name="btn2" style="display: none;" />
    </label>
</form>
person ManishChristian    schedule 15.09.2015

Как сказал выше R Lam, поскольку тег label не имеет определенного элемента формы для привязки (атрибут for), когда пользователь щелкает по нему, он запускает оба тега input[type="button"] внутри него.

person Teiv    schedule 28.09.2015