javascriptの段落テキストをDOM

-2

で変更することはできません。約1秒間変化し、前のテキストに戻ります。「Loading ...」行は「hi」に変更する必要があります。次のテキストボックスをクリックしてくださいもっと指示！ "javascriptの段落テキストをDOM

最新のクロムとエッジブラウザを試しました。

function greetMe() { 
 
    var yourName = document.getElementById("textbox").value; 
 
    
 
    info1 = "hi, Please click the next text box to see more instructions!" 
 
    document.getElementById("textToChange").innerHTML = info1 
 
}

#myForm { 
 
    float: left; 
 
    width: 30% 
 
} 
 

 
#myformInfo { 
 
    
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     
 
    </head> 
 
    
 
    <body> 
 
     <h1>HEllO ThERE!</h1> 
 
      
 
     <div id="myForm"><form > 
 
      <input id="textbox" placeholder="Your name"> 
 
      <button onclick="greetMe()">click!</button> 
 
      <br><br> 
 
      <input id=""> 
 
     </div></form> 
 
     
 
     
 
     <div id="myFormSteps"> 
 
      <p id="textToChange"> 
 
       <script>var info1 = "Loading..." 
 
       document.write(info1) 
 
       </script> 
 
      </p> 
 
     
 
     </div> 
 
      
 
      
 
    </body> 
 
    
 
</html>

出典

2016-05-06 vickygill

私はちょうど上記のスニペットをチェックします。そのうまく動作します。 –

確かに、ブラウザではうまくいきません... – vickygill

キャッシュを更新してページをリロードします。コンソールのエラーもチェックしてください。 –

あなたはボタンのtype属性を設定していないので、それはおそらくです。ボタンのデフォルトのタイプはsubmitです。ボタン>にtype = "button"属性を追加してみてください。

出典

2016-05-06 18:09:19 haltersweb

ボタンをクリックするとフォームが送信され、ページがリロード中です。そのため、初期状態に戻ります。別にそれは良いでしょうとしてJS

function greetMe(e) { 
    e.preventDefault(); 
    // ... 
}

を

HTML

<button onclick="greetMe(event);">click!</button>

：関数へのパラメータとしてeventにこの起こってパスを停止してからpreventDefault()に機能している引数を使用するにはあなたのインラインJSを削除し、代わりにイベントリスナーを使用してください。

var button = document.querySelector('button'); 
button.addEventListener('click', greetMe, false);

出典

2016-05-06 18:41:20 Andy

javascriptの段落テキストをDOM

答えて

関連する問題