Функция изменения содержимого DIV с помощью jQuery и Javascript не работает

0

У меня есть следующий код, который следует вызвать при нажатии кнопки:

 <input type="submit" name="cancel" value="cancel" onclick="clear_form (); return false;" class="pure-button">

Фактические функции удаляют текст из текстового поля и двух кнопок из формы:

 function clear_form () {
        $("#statement").val('');
        document.submitform.submit.value = "save";
        document.submitform.delete.remove();
        document.submitform.cancel.remove();
 }

Однако при нажатии кнопки (в Chrome) появляется следующее сообщение, и функция clear_form не работает.

Uncaught ReferenceError: clear_form is not defined 

Кто-нибудь знает, почему это так? Я что-то пропустил?

  • 0
    Есть ли дальнейший вывод в консоли JS, если Chrome?
  • 1
    Я просто не понимаю, почему люди используют встроенные события, когда они также используют jquery
Показать ещё 1 комментарий
Теги:

3 ответа

1
Лучший ответ

РЕДАКТИРОВАТЬ

DEMO

Javascript

function clear_form(){

    $("#statement").val('');
    document.submitform.submit.value = "save";
    document.submitform.delete.remove();
    document.submitform.cancel.remove();

    }

document.getElementById('submit').addEventListener('click',function(){

    alert()

    clear_form();

},false);

HTML

<input type="submit" name="cancel" value="cancel" class="pure-button" id='submit'>

Как указано @cookiemonster, пространство после имени функции делает (и) никакой разницы.

См. Ссылку

  • 0
    Не работает ...
  • 0
    @deemeetree, см. редактирование.
Показать ещё 8 комментариев
2

Когда вы объявляете function clear_form()... она объявлена внутри другой функции? В этом случае clear_form() локально доступен только в пределах этой содержащей функции. Прикрепление обработчиков кликов в атрибутах HTML требует, чтобы указанные функции объявлялись глобально.

Если вы не можете сделать clear_form() глобальным, вы все равно можете использовать addEventListener() чтобы добавить вашу локальную функцию из Javascript вместо использования атрибута onclick в HTML. Кстати, это предпочтительный способ сделать это на сайтах для разделения контента и логики.

0

Я не уверен, как вы используете этот код в своем полном приложении. но я сделал эту полную рабочую примерную страницу

попробуйте и сообщите нам, если это сработает с вами.

Пожалуйста, это в главном теге:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function clear_form() {
            //    $("#statement").val('');  or load the JQuery Library and us this line
            document.submitform.statement.value = "";  // Used this instead of JQuery
            document.submitform.submit.value = "save";
            document.submitform.delete.remove();
            document.submitform.cancel.remove();
        }
    </script>

</head>
<body>
    <form name="submitform" id="submitform">
        <textarea id="statement" cols="30" rows="3"></textarea> <br />
        <input type="button" name="delete" value="delete" /><br />
        <input type="button" name="submit" value="Submit" /><br />
        <input type="submit" name="cancel" value="cancel" onclick="clear_form (); return false;" class="pure-button">
    </form>
</body>
</html>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню