Tengo 3 botones y necesito cambiar su texto cuando se hace clic con Javascript. Funciona bien para el primero, pero el resto no se actualiza. Sé que una forma de lograr esto es agregar JS para diferentes entradas e id. Pero solo quiero escribir una sola función que resuelva este problema.
<input id=-btn" type="button" value="ADD" /> <input id="btn" type="button" value="ADD" /> <input id="btn" type="button" value="ADD" /> document.getElementById("btn").addEventListener( "click", function (event) { if (event.target.value === "ADD") { event.target.value = "ADDED"; } else { event.target.value = "ADD"; } }, false );<input id=-btn" type="button" value="ADD" onclick="func(this)"/> <input id="btn" type="button" value="ADD" onclick="func(this)"/> <input id="btn" type="button" value="ADD" onclick="func(this)"/> <script> function func(event) { if (event.value === "ADD") { event.value = "ADDED"; } else { event.value = "ADD"; } } </script> function changeValue(event) { if (event.target.value === "ADD") { event.target.value = "ADDED"; } else { event.target.value = "ADD"; } } <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"> <title>Document</title> </head> <body> </head> <body> <input id="btn" onclick="changeValue(event)" type="button" value="ADD" /> <input id="btn" onclick="changeValue(event)" type="button" value="ADD" /> <input id="btn" onclick="changeValue(event)" type="button" value="ADD" /> </body> </body> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> </html>