Good day! Tell me where I do not understand. I write a function on the event (button). The function should display text on the html page. However, nothing happens. Alert all displayed.

function adding() { var name = document.getElementById('new'); name.innerHTML = "fdkk;fdl"; // }; 
 <!doctype html> <html> <head> <title>Forma</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style_f.css"> </head> <body> <article> <aside> <div id="new"></div> </aside> <form> <p><input type="submit" value="Отправить" id="button" onclick="adding()"></p> </form> <script type="text/javascript" src="my_script.js"></script> </article> </body> </html>

  • one
    To prevent the page from being updated, you can add to the click event: onclick = "adding (); return false" - Oleg

1 answer 1

The text is inserted. You just have type = "submit" , and when you click on the button, the page reloads. You just do not have time to notice the result.

 function adding() { var name = document.getElementById('new'); name.innerHTML = "fdkk;fdl"; }; 
  <article> <aside> <div id="new"></div> </aside> <form> <p> <input type="button" value="Отправить" id="button" onclick="adding()"> </p> </form> </article>

Or use this hack:

 function adding(event) { var name = document.getElementById('new'); name.innerHTML = "fdkk;fdl"; }; 
 <article> <aside> <div id="new"></div> </aside> <form> <p> <input type="submit" value="Отправить" id="button" onclick="event.preventDefault(); adding();"> </p> </form> </article>