Desarrollo y diseño

[JS] innerHTML no funciona con el elemento input

FMartinez
FMartinez #1 Feb '20 Penitente

De la misma forma que puedo utilizar innerHTML para p, td, etc, no funciona con input.

Estoy haciendo ejercicios de hacer dinamicamente un formulario (test) y no consigo dar con la solución. A ver que ideas me dais.

Gracias!

vincen
vincen #2 Feb '20 Inocente

El innerHTML se suele usar para elementos del tipo div, p, span, td etc

Para objetos que tengan la propiedad "value", como los elementos que se usan en los forms, debes cambiar el valor de la propiedad "value".

var mInput= document.getElementById('myInputID'); 
mInput.value = 'nuevo valor'
1
taltal
taltal #3 Feb '20

El input no tiene html dentro del tag. Es un tag cerrado de por sí, con sus propiedades. Pero si te fijas, no puedes poner nada entre medio del tag. Así como un div:
<div>contenido</div> Aqui si que puedes utilizar el innerhtml para cambiar lo que viene a ser el "contenido".
El input es: <input /> (luego le puedes poner las propiedades) <input type="text" name="nombre" />.
Si quieres, puedes modificar atributos concretos, eso sí.

FMartinez
FMartinez #4 Feb '20 Penitente

La cosa es que tengo este codigo en HTML:

<p class="td_opciones"><input type="radio" name="pregunta1" id="p11" value="A" /> ISOs altos</p>

y lo estoy intentando hacer en JS:

var p=document.createElement("p");
	formu.appendChild(p);
	p.setAttribute("class","test_titulo_p");
	p.innerHTML="1. El trípode es crucial utilizando..."
	
var p=document.createElement("p");
formu.appendChild(p);
p.setAttribute("class","td_opciones");

var input=document.createElement("input");
p.appendChild(input);
input.setAttribute("type","radio");
input.setAttribute("id","p11");
input.setAttribute("name","pregunta1");
input.setAttribute("value","A");

Como veis me he quedado en el atributo "value", pero ahora quisiera poner lo que seria la respuesta a esa pregunta de test.

El resultado seria este:

a la derecha del radio quiero poner lo que seria la respuesta.

2 respuestas
B
[Borrado] #5 Feb '20

.

KaLaTa
KaLaTa #6 Feb '20

#4 tienes que añadir un label por cada radio option. Asegurate también de que todos los radio inputs tienen el mismo nombre.

Colgajo
Colgajo #7 Feb '20

A parte de lo que te comentan del label, deberías utilizar textContent en lugar de innerHTML. Ya que no estás parseando nada de HTML. De hecho yo no utilizaría innerHTML nunca, una porque el parseo es lento de cojones y segundo porque me evitaría inyecciones de HTML.

https://stackoverflow.com/questions/21311299/nodevalue-vs-innerhtml-and-textcontent-how-to-choose

2 1 respuesta
FMartinez
FMartinez #8 Feb '20 Penitente

Gracias!! solucionado con un label y textContent/innerHTML.

#7

Lo tendré en cuenta!

ududud
ududud #9 Feb '20 
let radio =document.createElement("input");
let p = document.createElement("p");
let label = document.createElement("label");
p.textContent = "1. El trípode es crucial utilizando...";
p.classList.add("clase del parrafo");
radio.classList.add("clase del radio");
radio.type = "radio";
radio.id = "p11";
radio.name = "pregunta1";
radio.value = "A";
label.classList.add("clase del label");
label.htmlFor = "p11";
label.textContent = "texto visible del radio"

formu.appendChild(p);
formu.appendChild(label)
formu.appendChild(radio);

Pequeños tips que aprendí, ya que es mejor acostumbrarse a las buenas practicas

  • "formu" no sé cómo lo tienes declarado, pero la idea es que fuera una constante ya que no la vamos a cambiar (al ser un objeto se puede modificar sus atributos sin problema)

<label for=""> en js seria el label.htmlFor y le indicas el id del input, la ventaja es que puedes hacer click tanto en el label como en el radio (ejemplo : https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_label) (https://stackoverflow.com/questions/18432376/what-does-for-attribute-do-in-html-label-tag)

y lo de ponerlo a la derecha quizás genera confusión, me parece que por norma general se pone primero el texto y luego el input, aunque no estoy seguro

1

Usuarios habituales

Tags