0

Olá! Estou a tentar fazer a implementação de divs num website quando o utilizador clica numa imagem com um + .
Estes divs em si são uma forma de transição para outras páginas, contudo ao serem adicionados pelo javascript essa sua função pára de funcionar.

<p id="adicionar_mais1"><img src="Imagens/Mais.jpg" onclick="Adicionar1()" id="Mais"></p>

function Adicionar1() {
    var primeirasoma = " <div onclick='location.href='Artigo19.html''><p><img src='Fotografias/foto86.jpg'></p><p class='topico space'><b>Titulo</b> 12.02.2020</p><p class='nomeart'>SEGUNDOTITULO</p><p class='descri'>TEXTO TEXTO</p></div>";

          ;
  document.getElementById("adicionar_mais1").innerHTML = 
   primeirasoma;
}
</script>

Penso que o problema está no facto de eu ter tido de mudar as "" para '' e isso ter alterado o href da localização, mas não sei outra forma de acrescentar este tipo de elementos à página.

Alguém sabe o que devo mudar no meu código para que funcione, ou se possível outro método mais fácil se houver, uma vez que vou ter de acrescentar vários divs de uma só vez.

Obrigada!!

1 Resposta 1

0

Cara se você quiser fazer isso só com javascript eu faria assim...

function Adicionar1() {

if (!document.querySelector('.topico')) {
    document.querySelector('#Mais').remove();

    //Element <div>
    var div = document.createElement('div');
    div.setAttribute('onclick', "location.href='Artigo19.html'");

    //Element <p>
    var p1 = document.createElement('p');

    //Element <img>
    var img = document.createElement('img');
    img.setAttribute('src', 'Fotografias/foto86.jpg');

    p1.appendChild(img);

    //Element <p>
    var p2 = document.createElement('p');
    p2.setAttribute('class', 'topico space');
    //Element <b>
    var b = document.createElement('b');
    var textB = document.createTextNode('Título');
    b.appendChild(textB);
    p2.appendChild(b);
    //Element <h4>
    var h4 = document.createElement('h4');
    var textH4 = document.createTextNode('12.02.2020');
    h4.appendChild(textH4);
    p2.appendChild(h4);
    //Element <p>
    var p3 = document.createElement('p');
    p3.setAttribute('class', 'nomeart');
    var textP3 = document.createTextNode("SEGUNDO TITULO");
    p3.appendChild(textP3)

    var p4 = document.createElement('p');
    p3.setAttribute('class', 'descri');
    var textP4 = document.createTextNode("SEGUNDO TITULO");
    p4.appendChild(textP4)

    //Adicionar Todos os elementos na div

    var htmlElement = document.getElementById("adicionar_mais1");

    div.appendChild(p1);
    div.appendChild(p2);
    div.appendChild(p3);
    div.appendChild(p4);

    htmlElement.appendChild(div);
}}

Mas eu recomendo que você utilize de CSS junto com JS. O código vai ser mais legível.

Você deve fazer log-in para responder a esta pergunta.