Элемент кнопки не отвечает

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

<!DOCTYPE html> 
<html> 
<head> 
<style> 

body {margin: 0; border: 0; padding: 0; background-color: #F3F781;} 

#container {height: 100px; padding: 0; border: 0; margin: 0;} 

#box1 {width: 100px; height: 100px; padding: 0px; border: 0px; border-radius: 10px; margin: 0px; outline: 0px; background-color: #F5DA81; display: inline-block;} 

#box2 {width: 100px; height: 100px; padding: 0px; border: 0px; border-radius: 10px; margin: 0px; outline: 0px; background-color: #58FA58; display: inline-block;} 

#box3 {width: 100px; height: 100px; padding: 0px; border: 0px; border-radius: 10px; margin: 0px; outline: 0px; background-color: #58FAD0; display: inline-block;} 

#box4 {width: 100px; height: 100px; padding: 0px; border: 0px; border-radius: 10px; margin: 0px; outline: 0px; background-color: #F5A9F2; display: inline-block;} 

</style> 

<script> 

function write(){ 
    console.log("hello"); 
} 

</script> 

</head> 
<body> 

<div id="container"> 
    <div id="box1"><p id="info">text</p> 
    </div> 
    <div id="box2"><p>text</p> 
    </div> 
    <div id="box3"><p>text</p> 
     </div> 
    <div id="box4"><p>text</p> 
    </div> 
</div> 

<br> 

<div> 
<button onclick="write()">write</button> 
</div> 

</body> 
</html>

Возможно, у меня немного странность, но по какой-то причине сценарий кнопки просто не работает. Я не вижу в этом ничего плохого. Есть что-то, что мне не хватает.

Спасибо за любую помощь, и я знаю о моих вопросах низкого качества. Я просто очень зациклен на этом.

источник

2015-03-22 Tom Albanese

Вы не можете использовать write() в качестве имени функции, потому что можно назвать document.write() - что и в настоящее время происходит - при нажатии на бутон, все исчезает, потому что вы не document.write() Инг ничего!

Изменить его к чему-то еще, например, test()

body { 
 
    margin: 0; 
 
    border: 0; 
 
    padding: 0; 
 
    background-color: #F3F781; 
 
} 
 
#container { 
 
    height: 100px; 
 
    padding: 0; 
 
    border: 0; 
 
    margin: 0; 
 
} 
 
#box1 { 
 
    width: 100px; 
 
    height: 100px; 
 
    padding: 0px; 
 
    border: 0px; 
 
    border-radius: 10px; 
 
    margin: 0px; 
 
    outline: 0px; 
 
    background-color: #F5DA81; 
 
    display: inline-block; 
 
} 
 
#box2 { 
 
    width: 100px; 
 
    height: 100px; 
 
    padding: 0px; 
 
    border: 0px; 
 
    border-radius: 10px; 
 
    margin: 0px; 
 
    outline: 0px; 
 
    background-color: #58FA58; 
 
    display: inline-block; 
 
} 
 
#box3 { 
 
    width: 100px; 
 
    height: 100px; 
 
    padding: 0px; 
 
    border: 0px; 
 
    border-radius: 10px; 
 
    margin: 0px; 
 
    outline: 0px; 
 
    background-color: #58FAD0; 
 
    display: inline-block; 
 
} 
 
#box4 { 
 
    width: 100px; 
 
    height: 100px; 
 
    padding: 0px; 
 
    border: 0px; 
 
    border-radius: 10px; 
 
    margin: 0px; 
 
    outline: 0px; 
 
    background-color: #F5A9F2; 
 
    display: inline-block; 
 
}

<script> 
 
    function test() { 
 
    //console.log("hello"); 
 
    alert('hello'); 
 
    } 
 
</script> 
 
<div id="container"> 
 
    <div id="box1"> 
 
    <p id="info">text</p> 
 
    </div> 
 
    <div id="box2"> 
 
    <p>text</p> 
 
    </div> 
 
    <div id="box3"> 
 
    <p>text</p> 
 
    </div> 
 
    <div id="box4"> 
 
    <p>text</p> 
 
    </div> 
 
</div> 
 
<br> 
 
<div> 
 
    <button onclick="test()">write</button> 
 
</div>

источник

2015-03-22 19:35:42

Спасибо за ответ –

Измените имя функции на что-то другое, чем «пишут()», потому что это уже существующий Java-метод.

источник

2015-03-22 19:37:03

Огромное спасибо, я действительно думал, что это что-то вроде того, даже проверено. Спасибо, на минутку. –

ᔕᖺᘎᕊ является правильным.

Но вы также должны рассмотреть возможность удаления атрибута onclick, только для лучших практик. Используемый таким образом код распространяется в глобальном масштабе, а также проходит через eval(), что может быть проблемой безопасности.

Рассмотрим обзорного его на вход или идентификатору баттона:

JS:

document.getElementById('btn').onclick = function() { 
    console.log('working'); 
}

HTML:

<div> 
    <input id="btn" value="write" type="submit"/> 
</div>

http://jsfiddle.net/milesrobinson/e9myj0kw/

источник

2015-03-22 19:42:34 pizzasynthesis

Элемент кнопки не отвечает

ответ

Смежные вопросы