Al hacer clic en el botón, muestra una alerta del valor de entrada + una cadena personalizada. Mi problema es que después de hacer clic en el botón y cambiar el valor de entrada, al hacer clic en el botón nuevamente se muestra el valor anterior en lugar del nuevo.
JavaScript
function test() { var message = document.getElementById("name").value; var newMessage = message + " " + "HELLO!"; document.getElementById("send").addEventListener("click", function (e) { e.stopImmediatePropagation(); alert(newMessage); console.log(newMessage); }); }HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="main.js"></script> <link rel="stylesheet" href="style.css"> <title>Greet your friend</title> </head> <body> <label class="main">Enter the name of your friend you want to greet</label> <input class="main" type="text" name="name" id="name" value="George"> <button class="main" id="send" onclick=test()>DONE</button> </body> </html>Tuviste incontables problemas de sintaxis que yo los arreglé. No necesita usar stopImmediatePropagation aquí.
function test() { var message = document.getElementById("name").value; var newMessage = message + " " + "HELLO!"; // -- You don't need a new variable to apply them -- // message += " " + "HELLO!"; // -- Or this one which is better and newer. Called 'String Literals' -- // message = `${message} HELLO!`; alert(newMessage); console.log(newMessage); }; <label class="main">Enter the name of your friend you want to greet</label> <input class="main" type="text" id="name" /> <button class="main" id="send" onclick="test()">DONE</button>