Básicamente, he escrito un código básico pero no puedo averiguar dónde está el problema que hace que no funcione.
así que tengo el siguiente fragmento DOM
<div class="container" id="page-layout"> <h1>Lets start <span>getting a little</span> more fancy!</h1> <img src="../images/tiger.jpg" alt="tiger image"> <div class="columns" > <div class="col col-1"> <h2>Dolor sit</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat distinctio quo ratione vitae cupiditate aliquid eos magni quisquam nesciunt commodi perferendis, et maiores molestias similique quam illo dolorum consequatur. Repellat!</p> <!--30--> </div> </div>y mi script funciona de la siguiente manera
var pageLayout = document.getElementById("page-layout"); document.getElementById("contact-page").onclick = function () { pageLayout[0].innerHTML = "<p>this is the contact page</p>"; }Tomé el contenedor por es y no por el cuerpo porque tengo el encabezado y el pie de página en la página que me gustaría que permanecieran allí y solo cambie el diseño del contenedor interno. ¿Qué podría causar el problema aquí? Intenté cambiar la información en el encabezado de mi página seleccionando el elemento por clase y la segunda línea del js parecía funcionar perfectamente, entonces, ¿el problema radica en mi selección del contenedor por la identificación?
fragmento del encabezado
<header> <div class="container container-nav"> <div class="title"> <h1 id="title-header"> My header </h1> <p class="sub-title">A blog about something </p> </div> <nav> <ul> <li><a href="#" class="current-page">Home</a></li> <li><a href="#">About</a></li> <li><a href="#" id="contact-page">Contact</a></li> </ul> </nav> </div> <!--close of the container--> </header>Parece estar bastante cerca, solo use pageLayout en lugar de pageLayout[0] ya que está apuntando al elemento por su ID. En este caso siempre será el 1er elemento. En el caso de que tenga que apuntar al elemento a través de su clase solo entonces debe usar la posición como lo hizo.
Una cosa que encontré que estaba mal mientras revisaba su código está en estas líneas de código:
var pageLayout = document.getElementById("page-layout"); document.getElementById("contact-page").onclick = function () { pageLayout[0].innerHTML = "<p>this is the contact page</p>"; } Donde escribiste pageLayout[0] . Dado que la función getElementById() no devuelve una matriz, debe deshacerse del " [0] " y simplemente escribir esto en el script:
var pageLayout = document.getElementById("page-layout"); document.getElementById("contact-page").onclick = function () { pageLayout.innerHTML = "<p>this is the contact page</p>"; }¡eliminar el [0] de hecho resolvió el problema!