0

<main class="entrada-artista contenedor-artistas">
        <img id="enlace-artista" src="img/akillamar_perfil.png" alt="">
        <div class="capa-artista"></div>
</main> <!-- Fin del Contenido Principal-->

Me marca este error al intentar seleccionar elementos en html, lo que estoy intentando es crear diferentes funciones que me permitan agregar una u otra imagen despues de dar un click en algun elemento, el detalle es que estoy seleccionando elementos de diferentes documentos, entonces al estar en un documento1 me marca que no encuentra el elemento del documento2 y viceversa. Quiero evitar crear diferentes paginas html para la misma entrada.

//Las id's provienen de el documento artistas.html
const akillamar = document.querySelector('#akillamar');
const pac2 = document.querySelector('#pac2');

console.log(akillamar);
console.log(pac2);


function cambiarAkill(){
    //La id enlace-artista proviene del documento entrada_artista
    const enlace = document.querySelector('#enlace-artista');
    enlace.setAttribute('src', "img/akillamar_perfil.png");
}

function cambiar2pac(){
    //La id enlace-artista proviene del documento entrada_artista
    const enlace = document.querySelector('#enlace-artista');
    enlace.setAttribute('src', "img/2pac_perfil.png");
}

//Utilizo onclick para escuchar el click en el elemento
akillamar.onclick = cambiarAkill();
pac2.onclick = cambiar2pac();

2
  • comparte el código de artistas.html, porque el error parece en que no encuentra el elemento enlace... si tienes un elemento en el html que tenga id="enlace-artista"?
    – Pipe
    el 18 mar. 2022 a las 18:46
  • Ya agregué ese fragmento de código donde se encuentra el elemento.
    – Mayo
    el 18 mar. 2022 a las 18:52

2 respuestas 2

0

El error "No se puede leer la propiedad 'setAttribute' de nulo" ocurre al intentar llamar al método setAttribute en un valor nulo . Para resolver el error, asegúrese de proporcionar la identificación correcta al método getElementById y cargue el script JS después de crear los elementos DOM.

El error "No se puede leer la propiedad 'setAttribute' de nulo" ocurre por 2 razones:

  1. Llamar al setAttribute()método en un elemento DOM que no existe.
  2. Insertar la etiqueta del script JS encima del HTML, donde se declaran los elementos DOM.
1
  • Realmente soy nuevo en Java Script y no comprendo algunas caracteristicas del DOM, no sé podrías ayudarme con algún ejemplo del como debería ser o algo que pueda ser un poco mas concrerto, donde posiblemente se encuentre mi error.
    – Mayo
    el 18 mar. 2022 a las 19:18
0

Los eventos onClick se deben asignar a la funcion, no al resultado de la ejeción de una funcion.

Te dejo el código funcionando que hace lo que tu quieres.

//Las id's provienen de el documento artistas.html
const akillamar = document.querySelector('#akillamar');
const pac2 = document.querySelector('#pac2');

function cambiarAkill(){
    //La id enlace-artista proviene del documento entrada_artista
    const enlace = document.querySelector('#enlace-artista');
    enlace.setAttribute('src', "img/akillamar_perfil.png");
    console.log("Enlace cambiado a", enlace.src);
}

function cambiar2pac(){
    //La id enlace-artista proviene del documento entrada_artista
    const enlace = document.querySelector('#enlace-artista');
    enlace.setAttribute('src', "img/2pac_perfil.png");
    console.log("Enlace cambiado a", enlace.src);
}

//Utilizo onclick para escuchar el click en el elemento
akillamar.onclick = cambiarAkill; //Sin los parentesis
pac2.onclick = cambiar2pac; //Sin los parentesis
<button id="akillamar">Akillamar</button>
<button id="pac2">2pac</button>
<main class="entrada-artista contenedor-artistas">
        <img id="enlace-artista" src="img/akillamar_perfil.png" alt="">
        <div class="capa-artista"></div>
</main> <!-- Fin del Contenido Principal-->

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.