Podmiana tekstu i usunięcie poprzedniego

0

Cześć potrzebuję małej pomocy z JS.
Dopiero się uczę i w sumie się zatrzymałem w pewnym momencie w programie.
Mam 4 elementy listy które się odwołują do poszczególnych tekstów, chciałbym, żeby np po naciśnięciu "o mnie" zniknął tekst powitalny i pojawił się tekst z zakładki "o mnie".
Tak samo z innymi, żeby każdy tekst zastępował poprzedni.
JAkieś pomysły jak mogę to zrobić? Chciałbym dot ego użyć czystego JavaScriptu

ZAZNACZAM!! Nie chce, żeby ktoś to za mnie napisał! Chciałbym tylko się dowiedzieć w jaką strone mógłbym pójść lub w co się 'zagłębić', żeby taki efekt osiągnąć.
HTML:

 <main>
            <div class="menuContainer">
                <ul>
                    <li class="about" id="about">
                        <h2>O mnie</h2>
                    </li>
                    <li class="projects" id="projects">
                        <h2>Projekty</h2>
                    </li>
                    <li class="empty">
                        <div class="circle"></div>
                    </li>

                    <li class="technology" id="technology">
                        <h2>Technologie</h2>
                    </li>
                    <li class="contact" id="contact">
                        <h2>Kontakt</h2>
                    </li>
                </ul>
            </div>


        <div class="poleDoZmiany">
            <p id="doZmiany" class="zmiana">
                Welcome Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit culpa labore temporibus fugiat eum error hic illo perspiciatis dignissimos, corporis, aut sapiente sint numquam!
            </p>
        </div>

            <p id="Tekst1" class="tekstDoZmiany">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur, natus nam! Excepturi ipsam voluptates magni odio adipisci, officia consequuntur praesentium eos cumque exercitationem soluta, eveniet dolor sed reiciendis asperiores modi pariatur placeat animi, debitis ratione. Hic illo incidunt, praesentium excepturi vero perspiciatis corrupti maxime accusamus, iusto repellendus quam id. </p>

            <p id="Tekst2" class="tekstDoZmiany">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus sint modi quisquam autem perferendis maxime impedit sed. Doloremque, reprehenderit neque perspiciatis facere quia saepe architecto odio aspernatur, voluptas nobis blanditiis, quisquam beatae?
            </p>

            <p id="Tekst3" class="tekstDoZmiany">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, facilis. Deserunt, in.
            </p>

            <p id="Tekst4" class="tekstDoZmiany">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure fugiat sequi accusantium inventore asperiores magnam impedit sit maiores praesentium! Ea exercitationem, veritatis placeat blanditiis vitae iste, cupiditate asperiores voluptate cumque quisquam ipsam repellat accusamus debitis omnis aliquid! Iste rerum consectetur impedit porro molestias numquam. Facere eveniet at dolorum deleniti! Facilis nisi ut beatae laudantium nulla culpa amet neque inventore at minus. Reiciendis distinctio ab voluptas! Earum excepturi corporis odit?
            </p>

CSS:

main {
    width: 80%;
    position: absolute;
    left: 10%;
    top: 35vh;
    background: white;
    -webkit-box-shadow: 0px 0px 34px 2px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 34px 2px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 34px 2px rgba(0,0,0,0.75);
}

main p {
    margin-top: 90px !important;
    margin: 25px;
    padding: 25px;
    text-align: center;
}

.media {
    text-align: center;
}

.media > img {
    padding: 10px;
}

p {
    display: none;
}

#doZmiany {
    display: block;
}

Javascript:

let tekst1 = document.getElementById('Tekst1');
let tekst2 = document.getElementById('Tekst2');
let tekst3 = document.getElementById('Tekst3');
let tekst4 = document.getElementById('Tekst4');

var zmiana = document.getElementById('doZmiany');
const oMnie = document.getElementById('about');
const projekty = document.getElementById('projects');

// oMnie.addEventListener('click', function(){
//     tekst1.classList.add('zmiana');
// })

// projekty.addEventListener('click', function(){
//     tekst2.classList.add('zmiana');
    
// })


const nodeList = document.querySelectorAll('.tekstDoZmiany');

oMnie.addEventListener('click', function(){
    nodeList[0].style.display = "block";
    console.log('Dziala');
})
0
Freja Draco napisał(a):

https://www.w3schools.com/jsref/prop_html_innerhtml.asp

innerHTML nie zmienia mi na dany tekst.
Przy użyciu innerHTML musiałbym wpisać cały tekst w JS tak?
Bo jak próbuje się odwołać po zmiennej albo po nodeList[1] to nic mi nie zmienia i w sumie tak jakby nie działa nic.

0

Ogarnąłem temat.
Jeżeli komuś będzie potrzebne to JS był taki:


document.getElementById('tabList').addEventListener('click', function(e){
    const tabList = ['about','projects','technology','contact'];
    const ti = tabList.indexOf(e.target.id);

    if(ti !== false){
        for(let i = 0; i < tabList.length; i += 1) {
          if(ti !== i){
            document.getElementById(tabList[i]+'Txt').style.display = 'none';
          }
        }
        document.getElementById(tabList[ti]+'Txt').style.display = 'block';
        document.getElementById('doZmiany').style.display = "none";
      }
  });

1 użytkowników online, w tym zalogowanych: 0, gości: 1