0
153
ViewsEl texto de entrada no se muestra en la página Html
Estoy tratando de hacer una página web básica como un proyecto y no puedo hacer que mi texto se muestre para una etiqueta de etiqueta que se inyecta usando javaScript. Si alguien tiene alguna idea o podría señalarme en la dirección correcta, sería genial. Aquí hay un fragmento del código con el que tengo problemas.
let todo = [ { text: "Item 1", completed: true, }, { text: "Item 2", completed: false, }, { text: "Item 3", completed: false, }, { text: "Item 4", completed: false, }, { text: "Item 5", completed: true, }, ]; todo.forEach(function (todos, index) { const p = document.createElement("p"); const div = document.createElement("div"); const checkBox = document.createElement("input"); checkBox.type = "checkbox"; checkBox.id = `newTodo${index}`; checkBox.value = `todoItem${index}`; const checkBoxLabel = document.createElement("label"); checkBoxLabel.htmlFor = `todoItem${index}`; checkBoxLabel.innerText = todos.text; //"This is the text that is not being rendered to the browser" document .querySelector("#todoItem") .appendChild(div) .appendChild(checkBox) .appendChild(checkBoxLabel); });1 answers
Answer question0
Su código realmente está funcionando. Pero está generando las etiquetas dentro de la entrada de la casilla de verificación. Por eso no eres capaz de verlo.
El problema es con la siguiente sección.
document .querySelector("#todoItem") .appendChild(div) .appendChild(checkBox) .appendChild(checkBoxLabel)¿Qué hace esto?
Esto primero seleccionará un elemento del DOM que tenga id todoItem . Dentro de eso se agregará su div. Dentro de ese div, se agregará la checkBox de verificación que es la entrada. Dentro de esa entrada, se checkBoxLabel que es la etiqueta.
Entonces su jerarquía será como, div dentro del contenedor #todoItem , checkBox dentro de ese div, checkBoxLabel dentro checkBox .
Estaba agregando checkBoxLabel dentro de la casilla de verificación. Debe estar en el mismo nivel de la casilla de verificación O la entrada se puede colocar dentro de la etiqueta. Una etiqueta dentro de una casilla de verificación no será visible. Puede colocar la checkbox de verificación dentro de la label O tanto la checkbox de verificación como la label en la misma jerarquía dentro de div .
Colocar casilla de verificación dentro de la etiqueta
document .querySelector("#todoItem") .appendChild(div) .appendChild(checkBoxLabel) .appendChild(checkBox);Esto hará que la casilla de verificación se coloque después de la etiqueta. como el de abajo
Colocando la casilla de verificación y la etiqueta dentro del div con la misma jerarquía.
div .appendChild(checkBox); div .appendChild(checkBoxLabel); document .querySelector("#todoItem") .appendChild(div);Esto mostrará primero la casilla de verificación, luego la etiqueta como se muestra a continuación
Encuentre el violín de trabajo con el segundo ejemplo.
const todo = [ { text: "Item 1", completed: true, }, { text: "Item 2", completed: false, }, { text: "Item 3", completed: false, }, { text: "Item 4", completed: false, }, { text: "Item 5", completed: true, }, ]; todo.forEach(function (todos, index) { const p = document.createElement("p"); const div = document.createElement("div"); const checkBox = document.createElement("input"); checkBox.type = "checkbox"; checkBox.id = `newTodo${index}`; checkBox.value = `todoItem${index}`; // added checking condition checkBox.checked = todos.completed; const checkBoxLabel = document.createElement("label"); checkBoxLabel.htmlFor = `todoItem${index}`; checkBoxLabel.innerText = todos.text; // Place checkbox first then the label, Both on the div div .appendChild(checkBox); div .appendChild(checkBoxLabel); document .querySelector("#todoItem") .appendChild(div); }); <div id="todoItem"></div>