Flere checkboxes deler name=“interest” og giver gentagne query-parametre. Hent dem med getAll(), og brug arrayets pladser 0, 1 og 2 til at vise værdierne i hver sin chip.
<form action="/event-pass.html" method="get" aria-label="Event-pass formular">
<div class="form-group">
<label for="nickname">Nickname</label>
<input id="nickname" name="nickname" type="text" value="PixelPanda" minlength="2" required aria-describedby="nickname-error">
<p class="error-message" id="nickname-error">Skriv mindst to tegn</p>
</div>
<div class="form-group">
<label for="portfolio">Portfolio (valgfrit)</label>
<p id="portfolio-hint">Brug en fuld URL, fx https://example.com</p>
<input id="portfolio" name="portfolio" type="url" value="https://example.com" aria-describedby="portfolio-hint portfolio-error">
<p class="error-message" id="portfolio-error">Skriv en gyldig URL</p>
</div>
<div class="form-group">
<fieldset aria-describedby="reason-error">
<legend>Hvad håber du at få med hjem?</legend>
<label for="inspiration">
<input id="inspiration" name="reason" type="radio" value="inspiration" checked required>
Inspiration
</label>
<label for="tools">
<input id="tools" name="reason" type="radio" value="tools">
Praktiske værktøjer
</label>
<label for="network">
<input id="network" name="reason" type="radio" value="network">
Nye kontakter
</label>
</fieldset>
<p class="error-message" id="reason-error">Vælg én mulighed</p>
</div>
<div class="form-group">
<label for="hype">Hype-niveau</label>
<input id="hype" name="hype" type="range" min="0" max="100" value="60">
</div>
<div class="form-group">
<label for="guidelines">
<input id="guidelines" name="guidelines" type="checkbox" value="accepted" required aria-describedby="guidelines-error">
Jeg accepterer eventets retningslinjer
</label>
<p class="error-message" id="guidelines-error">Du skal acceptere retningslinjerne</p>
</div>
<div class="form-group">
<fieldset>
<legend>Hvad interesserer dig?</legend>
<label for="html">
<input id="html" name="interest" type="checkbox" value="HTML" checked>
HTML
</label>
<label for="css">
<input id="css" name="interest" type="checkbox" value="CSS" checked>
CSS
</label>
<label for="javascript">
<input id="javascript" name="interest" type="checkbox" value="JavaScript">
JavaScript
</label>
</fieldset>
</div>
<button type="submit">Lav event-pass</button>
</form>
const eventPass = document.querySelector(".event-pass");
if (eventPass) {
const nicknameOutput = document.querySelector(".nickname");
const reasonOutput = document.querySelector(".reason-output");
const hypeLevel = document.querySelector(".hype-level");
const chipOne = document.querySelector(".chip-one");
const chipTwo = document.querySelector(".chip-two");
const chipThree = document.querySelector(".chip-three");
const params = new URLSearchParams(location.search);
const nickname = params.get("nickname");
const reason = params.get("reason");
const hypeValue = Number(params.get("hype"));
nicknameOutput.textContent = nickname;
reasonOutput.textContent = reason;
if (hypeValue >= 75) {
hypeLevel.textContent = "Høj";
} else if (hypeValue >= 40) {
hypeLevel.textContent = "Middel";
} else {
hypeLevel.textContent = "Lav";
}
// Hent alle interest-værdier, og vis dem i hver sin chip
}
Hints
const interests = params.getAll("interest");
chipOne.textContent = interests[0] || "Ingen interesser valgt";
chipTwo.textContent = interests[1] || "";
chipThree.textContent = interests[2] || "";