Quiero cambiar el código HTML al hacer clic en el botón. ¿Hay alguna otra manera de lograr esto? El problema al que me he enfrentado es que, con el tiempo, los códigos ex1, ex2 se hacen más grandes y se vuelven difíciles de leer debido a que el texto es una cadena.
<button onclick="test (1)"> click </button> <button onclick="test (2)"> click </button> <div id="ex1"></div> const faq = { ex1: `<button>1</button>`, ex2: `<button>2</button>` } function test (number) { if (number == 1){ document.getElementById("ex1").innerHTML = (faq.ex1); } if (number == 2){ document.getElementById("ex1").innerHTML = (faq.ex2); } }Solo necesitaba eliminar el espacio entre la invocación de su función.
En lugar de esto:
test (1)hacer esto
test(1)También debe eliminar el espacio entre el nombre de su función y el paréntesis.
En lugar de esto
function test ()Hacer esto
function test()También debe colocar su javascript en una etiqueta de script y asegurarse de que esté antes del html que lo llama. Ver fragmento de ejemplo
<script> const faq = { ex1: `<button>1</button>`, ex2: `<button>2</button>` } function test(number) { if (number == 1){ document.getElementById("ex1").innerHTML = (faq.ex1); } if (number == 2){ document.getElementById("ex1").innerHTML = (faq.ex2); } } </script> <button onclick="test(1)"> click </button> <button onclick="test(2)"> click </button> <div id="ex1"></div>