por qué no se muestran mis vanos dentro de mi div?

votos
0

Estoy tratando de mostrar algunos tramos inline como si fueran un documento. Sin embargo, cuando me carga mis etiquetas span en mi div, que no aparecen a pesar de que de acuerdo con la consola de la div contiene los vanos ellos mismos. No estoy seguro si tengo que ser el establecimiento de parámetros adicionales de los mismos tal vez vanos ??

var documentbody = document.getElementById(docbod);

/* turns every word in the document into an element then appends them to the div that contains the doc body */
function splitdocintowords(div) {
  var divarray = []
  var state = [hey, there, how, are, you, doing?]
  for (let i = 0; i < state.length; i++) {
    span = document.createElement(span)
    span.value = state[i]
    span.id = word + i;
    span.classList.add(initialTextcolor)
    div.append(span)
  }
  return div
}


/* highlights a selected word within the document*/
function highlight(selection) {
  console.log(selection, selection)
  let element = document.getElementById(selection.id);
  element.classList.add(highlighted);

}
documentbody.value = splitdocintowords(documentbody)
documentbody.addEventListener(mouseup, highlight(window.getSelection()));
<h2>doc body</h2>
<div id=docbod class=docbody> </div>

Publicado el 09/10/2019 a las 19:01
fuente por usuario
En otros idiomas...                            


2 respuestas

votos
-1

Usted SPAN estaba recibiendo anexa a la div, pero que no tenían ningún contenido en el interior ya que el atributo "value" se estableció en lugar de innerText o innerHTML

var documentbody = document.getElementById("docbod");

/* turns every word in the document into an element then appends them to the div that contains the doc body */
function splitdocintowords(div) {
  var state = ["hey", "there", "how", "are", "you", "doing?"]
  for (let i = 0; i < state.length; i++) {
    span = document.createElement("span")
    span.innerHTML = state[i]; //use innerText, innerHTML or textContent here
    span.id = "word" + i;
    span.classList.add("initialTextcolor")
    div.appendChild(span)
  }
}


splitdocintowords(documentbody)
<h2>doc body</h2>
<div id="docbod" class="docbody"> </div>

Respondida el 09/10/2019 a las 19:08
fuente por usuario

votos
-1

Cambiar el span.valueaspan.innerHTML = state[i]

var documentbody = document.getElementById("docbod");

/* turns every word in the document into an element then appends them to the div that contains the doc body */
function splitdocintowords(div) {
  var divarray = []
  var state = ["hey", "there", "how", "are", "you", "doing?"]
  for (let i = 0; i < state.length; i++) {
    span = document.createElement("span")
    span.innerHTML = state[i]
    span.id = "word" + i;
    span.classList.add("initialTextcolor")
    div.append(span)
  }
  return div
}

/* highlights a selected word within the document*/
function highlight(selection) {
  console.log("selection", selection)
  let element = document.getElementById(selection.id);
  element.classList.add("highlighted");

}
documentbody.value = splitdocintowords(documentbody)
documentbody.addEventListener("mouseup", highlight(window.getSelection()));
#docbod {
  border: 1px solid #000
}
<h2>doc body</h2>
<div id="docbod" class="docbody"> </div>

Respondida el 09/10/2019 a las 19:06
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more