aspファイルのhtmlボタン要素を使用するとJavaScriptがページリロードを引き起こします

htmlボタン要素にJavaScriptを書き込もうとしています。しかし、それはページリロードを引き起こします。しかし、私はボタンの種類で入力を使用するとうまく動作します。これの理由は何ですか？ここでボタン要素を使用できないのはなぜですか？aspファイルのhtmlボタン要素を使用するとJavaScriptがページリロードを引き起こします

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>Default</title> 
<script type="text/javascript"> 
    function changeTheText() { 
     document.getElementById("paragraphText").innerHTML = "The text is changed!"; 
    } 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div>  
    <p id="paragraphText">This is awesome!</p> 

    <button onclick="changeTheText()">Change the text</button> 

    <input type="button" onclick="changeTheText()" value="Click" /> 
</div> 
</form>

出典

2016-06-14 TaroYuki

フォーム内のすべてのボタンのデフォルトの動作は、それが特に指定されない限り、提出することです。この動作を回避するために、フォームタグの外側にボタンタグを配置することができます。

これは主にブラウザに関連しています。 IEは、特に、ボタンに関連するいくつかのぎこちなさを持っています。 2種類のボタンの違いを簡単に検索できます。ここから始めるには良い場所がいくつかあります。

http://web.archive.org/web/20110721191046/http://particletree.com/features/rediscovering-the-button-element/

<button> vs. <input type="button" />. Which to use?

お役に立てば幸いです。

出典

2016-06-14 21:33:08 pparas

ありがとうございました。私はそれを理解しました。または、button = "button"のようにタグのボタンタイプを変更することができました。 – TaroYuki

用途：

event.preventDefault();

フォームので、ページのリロードを提出することを避けるために。

私はあなたのjavascriptのコードを書くための別の方法をsugggest：

function changeTheText(evt, selector) { 
 
    var e = evt || window.event; 
 
    document.getElementById(selector).innerHTML = "The text is changed by : " + e.target.tagName + "!"; 
 
    e.preventDefault(); 
 
}

<form id="form1" runat="server"> 
 
    <div> 
 
     <p id="paragraphText">This is awesome!</p> 
 

 
     <button onclick="changeTheText(event, 'paragraphText')">Change the text</button> 
 

 
     <input type="button" onclick="changeTheText(event, 'paragraphText')" value="Click" /> 
 
    </div> 
 
</form>

出典

2016-06-14 21:31:12 gaetanoM

aspファイルのhtmlボタン要素を使用するとJavaScriptがページリロードを引き起こします

答えて

関連する問題