0

Estoy tratando de agregar este html desde JavaScript Lo he intentado pero no he tenido suerte, me da error. Si alguien me pudiera guiar como se hace lo agradeceria mucho

document.getElementById('wocart').innerHTML += 
   '<div class="radio-group">
        <input class="wopicdelradio" type="radio" id="wodel" name="selector" checked onclick="ispickup();" onchange="updateWOaddress();">
        <label class="rlabel" for="wodel">Express</label>
        <input class="wopicdelradio" type="radio"
        id="wopic" name="selector" onclick="ispickup();" onchange="updateWOaddress();">
        <label class="rlabel" for="wopic">Recoger</label>
</div>';`
2
  • Comparte con nosotros el error que te da.
    – Juan Marco
    Commented el 14 dic. 2020 a las 12:42
  • El error se produce porque debes escapar las comillas simples. Sin embargo, debes completar la pregunta agregando las funciones que el código llama. Commented el 14 dic. 2020 a las 13:23

2 respuestas 2

1

El problema al parecer se encuentra en que estas encerrando las etiquetas html entre comillas simples (')y debes envolverlas en estas otras: `

const ispickup = () => {
    alert('hiciste click en el checkbox. Este alert corresponde a la funcion isPickup');
  }

const updateWOaddress = () =>{
      alert('el valor cambió. Este alert corresponde a la funcion updateWOaddress');
  }

document.getElementById('wocart').innerHTML += 
   `<div class="radio-group">
        <input class="wopicdelradio" type="radio" id="wodel" name="selector" checked onclick="ispickup();" onchange="updateWOaddress();">
        <label class="rlabel" for="wodel">Express</label>
        <input class="wopicdelradio" type="radio"
        id="wopic" name="selector" onclick="ispickup();" onchange="updateWOaddress();">
        <label class="rlabel" for="wopic">Recoger</label>
</div>`
<div id='wocart'></div>

Edit: Ahi agregue dos funciones genericas que tienen el nombre de las funciones que llama el código html insertado. La idea es que esas dos funciones estén definidas para que el código html entienda lo que tiene que hacer.

2
  • lo intente y no funciona, si aparece en el dom pero la opcion onclick no funciona :( Commented el 14 dic. 2020 a las 1:44
  • Ahi edité la respuesta. Sí funciona, el tema es que nunca pusiste el codigo de las funciones isPickup y updateWOaddress. Ahora están definidas (hacen un simple alert, pero es para probar solamente) y el código funciona sin errores.
    – Agustin G.
    Commented el 14 dic. 2020 a las 3:33
1

Para ello debes de usar en lugar de inerHTML la función outerHTML y además usar las comillas dobles, aquí te dejo como quedaría.

const ispickup = () => {
    alert('hiciste click en el checkbox. Este alert corresponde a la funcion isPickup');
  }

const updateWOaddress = () =>{
      alert('el valor cambió. Este alert corresponde a la funcion updateWOaddress');
  }

document.getElementById('wocart').outerHTML+= 
   "<div class='radio-group'>"+
   "<input class='wopicdelradio' type='radio' id='wodel' name='selector' checked onclick='ispickup();' onchange='updateWOaddress();'>"+
        "<label class='rlabel' for='wodel'>Express</label>"+
        "<input class='wopicdelradio' type='radio'id='wopic' name='selector' onclick='ispickup();' onchange='updateWOaddress();'>"+
        "<label class='rlabel' for='wopic'>Recoger</label>"+
"</div>";
<div id="wocart">

</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.