Mi objetivo es hacer que se mueva hacia adelante y hacia atrás con las pulsaciones de los botones como si fuera un cursor real
<div> hello<span id="hi"></span> </div> <button onclick="move('left')">left</button> <button onclick="move('right')">right</button>No puedo encontrar la forma de ubicar el lapso en el texto y luego moverlo hacia un lado presionando el botón para que vaya de hola | al infierno con una pulsación a la izquierda
function move(direction){ switch (direction) { case "left": break; case "right": break; } }todo el css esta bien
span { content: ''; width: 3px; height: 17px; background: black; opacity: 0; display: inline-block; animation: blink 0.5s linear infinite alternate; } @keyframes blink { 50% { opacity: 0; } 100% { opacity: 1; } }La forma en que debe pensar en esto es que su documento es un árbol (como en la estructura de datos) porque así es como lo ve el navegador. Eso significa que la parte con la que está trabajando tiene tres secciones:
div .....[text] ..... span .....[text] div Los tres son elementos secundarios de su div principal, por lo que estarán en su colección childNodes . Dos son nodos de texto , el otro es un elemento de intervalo .
El tipo de nodo de text tiene una propiedad textContent , que puede usar para obtener o establecer el texto dentro del nodo. Algo como esto:
const myDiv = document.getElementsByTagName('div')[0]; // assuming you only have one div, more practical to give your div an id and use document.getElementById("my-id"); myDiv.childNodes[0].textContent = "hello";Esto parece un poco adyacente a la tarea y ciertamente parece una buena oportunidad para aprender, así que en lugar de escribir el código, tomaré el corte largo. El proceso por el que pasaría en su función es:
div principal; tal vez tener una id lo haría más fácil.textContent del texto de su primer hijo.textContent del texto de su último hijo. Tenga en cuenta que al hacerlo de esta manera, no estamos haciendo nada con el span , sino que estamos moviendo el texto a su alrededor.
Para un toque extra, podría crear un objeto que mantenga referencias a los nodos de texto en cuestión para que no tenga que recuperarlos cada vez que se hace clic en un botón.