Digamos que tengo 2 cuadros y un archivo de texto llamado data.txt:
<?php $myfile = fopen("data.txt") or die("Unable to open file"); ?> <button> Go </button> <div id = "box1" > <h5> BOX 1 </h5> <?php echo fread($myfile,filesize("data.txt")); ?> </div> <div id = "box2> <h5> BOX 2 </h5> </div> #box1 { width: 100px; height: 200px; background-color: red; position: absolute; left: 0px; top: 0px; text-align: center; font-family: Times New Roman; } #box2 { width: 100px; height: 200px; background-color: white; position: absolute; left: 0px; top: 0px; text-align: center; font-family: Times New Roman; }¿Cómo muevo el texto del archivo de texto, "Hello World" del cuadro 1 al cuadro 2 usando JavaScript simple?
Supongo que desea mover el texto del cuadro 1 al cuadro 2 cuando el usuario hace clic en el botón. He sustituido algún texto codificado en lugar del contenido del archivo. También usé intervalos y agregué algunos atributos de identificación para que sea más fácil acceder a los elementos usando JavaScript. Creo que el fragmento a continuación hace lo que desea, ya que al hacer clic en el botón Ir, se mueve el texto del cuadro 1 al cuadro 2:
const span1Id = document.querySelector('#span1-id'); const span2Id = document.querySelector('#span2-id'); const goBtn = document.querySelector('#go-btn'); goBtn.addEventListener('click', function(){ span2Id.innerText = span1Id.innerText; }); <button id="go-btn"> Go </button> <div id="box1" > <h5> BOX 1 </h5> <span id="span1-id">Text from file</span> </div> <div id="box2"> <h5> BOX 2 </h5> <span id="span2-id"></span> </div>Es posible que necesite los elementos div por otras razones, pero no se usan en mi ejemplo. El siguiente HTML funcionaría exactamente igual:
<button id="go-btn"> Go </button> <h5> BOX 1 </h5> <span id="span1-id">Text from file</span> <h5> BOX 2 </h5> <span id="span2-id"></span>