Webbteknik 2

Laboration 1C

Javascript och HTML

I den här labben skall vi prova på att ändra lite olika saker i några html-element när en användare klickar på en knapp.

0 - Skapa en arbetsmapp

Förslagsvis med namnet lab-1c, där du sparar filerna för just den här laborationen.

1 - Förbered en html- och en javascript-fil

Skapa en fil index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Ändra innehåll</title>
    <script type="module" src="script.js"></script>
  </head>
  <body>
    <h1>Min första interaktiva sida</h1>
    <p>Detta är en vanlig paragraf.</p>

    <button id="bytText">Byt text</button>
    <button id="bytHTML">Byt HTML</button>

    <h2>En bild</h2>
    <img src="https://placecats.com/200/200" alt="En katt" />
    <button id="bytBild">Byt bild</button>
  </body>
</html>

Skapa sedan filen script.js och lägg in följande startkod:

const textButton // TODO 1: hämta knappen med id "bytText"
textButton.addEventListener("click", function() {
  // TODO 2: använd egenskapen textContent för att ändra texten i pElement
})

// TODO 3: Lägg till motsvarande kod för knappen "bytHTML"

// TODO 4: Lägg till kod för knappen "bytBild"

Javascript-koden innehåller några TODO-kommentarer som du ska fylla i under labbens gång.

2 - Byt textinnehåll med textContent

Börja med att, överst i script.js, hämta paragraf-elementet med querySelector:

const pElement = document.querySelector("p");

Hittills har vi använt getElementById för att få tag på ett element utifrån dess id, men med querySelector kan vi använda alla selektorer som vi använder i CSS. På så sätt behöver vi inte sätta ID:n på alla element vi vill använda från javascript. Observera att om selektorn “träffar” flera element så är det det som ligger först i html-strukturen som vi “får tag i”.

Använd sedan querySelector på samma sätt som ovan för att hämta knappen med id bytText där koden säger // TODO 1.

Observera att du behöver sätta # framför id:t när du använder querySelector, precis som i CSS.

Slutligen använder du textContent för att ändra texten i paragrafen när knappen klickas, där koden säger // TODO 2:

pElement.textContent = "Hej! Det här är ny text.";

Spara och uppdatera i webbläsaren. Testa att klicka på knappen och se vad som händer. Om inget händer, kontrollera konsolen för eventuella felmeddelanden. Det är lätt att göra små misstag som gör att koden inte fungerar.

3 - Lägg in HTML med innerHTML

Hämta knappen #bytHTML och skapa en klick-händelse på platsen i koden markerad med // TODO 3. Följ samma mönster som för #bytText-knappen.

Exempelvis:

const htmlButton = document.querySelector("#bytHTML");
htmlButton.addEventListener("click", function() {
  // TODO
})

Använd sedan egenskapen innerHTML på platsen för // TODO för att lägga in ny HTML i paragrafen.

Till exempel:

pElement.innerHTML = "<strong>Hej!</strong> Det här är <em>ny HTML</em>.";

Spara och testa i webbläsaren. Klicka på knappen för att se att HTML-innehållet ändras.

Undersök: Vad händer om du försöker lägga in HTML med textContent i stället?

4 - Ändra en bild med src

Nu ska du göra så att knappen #bytBild ändrar bildens källa.

Följ dessa steg på platsen i koden markerad med // TODO 4:

  1. Hämta bild-elementet: 
    const bild = document.querySelector("img");
  2. Skapa en klickhändelse på knappen #bytBild, precis som för de andra knapparna ovan.
  3. I funktionen som körs vid klick, ändra bild.src till en annan bildadress 
    bild.src = "https://placebear.com/200/200";

Spara och testa i webbläsaren. Klicka på knappen för att se att bilden ändras.

Kontrollfrågor

  1. Vad är skillnaden mellan textContent och innerHTML?
  2. Vad gör querySelector() och hur skiljer den sig från getElementById()?