Почему моя кнопка вызывает функцию, при нажатии на которую моя страница перезагружается - PullRequest
Новая
       4

Почему моя кнопка вызывает функцию, при нажатии на которую моя страница перезагружается

0 голосов
/ 09 июля 2020

Я работаю над формой, которая использует javascript для создания абзаца. По какой-то причине, когда я нажимаю кнопку, моя страница перезагружается. Не могли бы вы сообщить мне, что я здесь делаю не так? 

console.log('everything is linked')
function createParagraph() {
    console.log('function called');
    var wordOne=document.getElementById('textOne').value
    var wordTwo=document.getElementById('testTwo').value

    var paragraph = '<p>My first word is' + wordOne+'. My Second word is '+ wordTwo+'.</p>';

    document.getElementById('answer').innerHTML= paragraph
}
<body>
    <form action="">
        <input id='textOne' type="text">
        <input id='textTwo' type="text">
        <button onclick="createParagraph()">Click Me</button>
    </form>
    
    <div id="answer"></div>

    <script src="app.js"></script>
</body>

Ответы [ 3 ]

1 голос
/ 09 июля 2020

Ваша кнопка действует как кнопка отправки, поэтому ваша форма отправляется. Чтобы предотвратить это, вы можете использовать атрибут onSubmit в своей форме и предотвратить отправку формы. 

<form onSubmit="return false">
1 голос
/ 09 июля 2020

По умолчанию <button> внутри <form> отправляет эту форму. Установите type кнопки, чтобы явно не быть «отправкой»: 

<button type="button" onclick="createParagraph()">Click Me</button>

Кроме того, если вы не используете фактический <form> (не хотите отправлять его), то, вероятно, лучше всего чтобы просто удалить его: 

<body>
    <input id='textOne' type="text">
    <input id='textTwo' type="text">
    <button type="button" onclick="createParagraph()">Click Me</button>
    
    <div id="answer"></div>

    <script src="app.js"></script>
</body>

Таким образом не будет ничего, что можно было бы случайно отправить.

0 голосов
/ 09 июля 2020

Поскольку кнопка находится в форме, и форма, вероятно, отправлена.

добавьте type="button", чтобы не отправлять форму. 

console.log('everything is linked')
function createParagraph() {
    console.log('function called');
    var wordOne=document.getElementById('textOne').value
    var wordTwo=document.getElementById('testTwo').value

    var paragraph = '<p>My first word is' + wordOne+'. My Second word is '+ wordTwo+'.</p>';

    document.getElementById('answer').innerHTML= paragraph
}
<body>
    <form action="">
        <input id='textOne' type="text">
        <input id='textTwo' type="text">
        <button type="button" onclick="createParagraph()">Click Me</button>
    </form>
    
    <div id="answer"></div>

    <script src="app.js"></script>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...