CSS/JS Programmieren dass Link erst klickbar wenn?
Hi, ich schreibe eine Website mit so einem Fragebogen gerade und da gibt es einen Button, der zu einer nächsten HTML Seite weiterverlinkt:
<a href="seite2.html"><div>Weiter</div></a>
Ich möchte aber, dass man erst draufklicken und zur nächsten Seite gelangen kann, wenn vorher eine Auswahl getroffen wurde, also eine Bedingung vorher erfüllt ist.
Ich weiß, dass ich das CSS steuern kann wie einen unsichtbaren Knopf erst sichtbar machen, sobald die Bedingung erfüllt ist. Aber ich hätte den "Weiter Knopf" die ganze Zeit da, nur erst klickbar, sobald die Bedingung erfüllt ist. Der Link ist aber Bestandteil vom HTML nicht vom CSS und deswegen weiß ich nicht wie das geht.
Ich hoffe mir kann jemand weiterhelfen. LG
Ergänzung: Ich verwende auch Jquery, nicht nur JS, vergessen zu schreiben. JS verstehe ich nicht so gut
3 Antworten
Hi Zebra321,
ersteinmal muss ich erwähnen das JQuery nichts anderes ist als JavaScript. JQuery ist ein JavaScript-Framework.
Ich würde das ganze mit JavaScript machen und nicht mit CSS. Und zwar kannst du mit JS abfragen ob ein bestimmtes Element ausgewählt wurde.
Hier Beispiele in JavaScript von mir:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
let meinLink, meineCheckBox;
document.addEventListener("DOMContentLoaded", init);
function init() {
meinLink = document.querySelector("#meinLink");
meinLink.addEventListener("click", preventClick);
meineCheckBox = document.querySelector("#meineCheckBox");
meineCheckBox.addEventListener("change", changeLinkPrevent);
}
function changeLinkPrevent() {
if(meineCheckBox.checked) {
meinLink.removeEventListener("click", preventClick);
} else {
meinLink.addEventListener("click", preventClick);
}
}
function preventClick(event) {
event.preventDefault();
}
</script>
</head>
<body>
<form id="meineForm">
<input type="text" name="meinName" id="meinName" placeholder="Mein Name">
<input type="checkbox" name="meineCheckBox" id="meineCheckBox">
</form>
<a href="seite2" id="meinLink">Weiter</a>
</body>
</html>
Im oberen Beispiel wird dem a-Element ein EventListener hinzufügt der eine Funktion Namens preventClick auslöst die wiederum verhindert das der Link weiterleitet. Wenn also die Checkbox aktiviert wurde, kann wird dieser EventListener für das a-Element entfernt und dadurch auch nicht die Aktion des Links unterdrückt. Fall zwischendurch wieder die checkbox das Häkchen entfernt wird, kommt auch wieder auf das a-Element der EventListener.
Viel Erfolg bei der Umsetzung.
Alles was du dynamisch ändern willst, muss mit Javascript oder ähnlichem getan werden
Als Beispiel:
<form id="fragebogen">
<label for="auswahl">Klick etwas an:</label>
<select id="auswahl"name="auswahl">
<option value="">Bitte wählen...</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
</form>
<a id="weiterLink" href="seite2.html" class="disabled">
<div>Weiter</div>
</a>
<script>
document.getElementById('auswahl').addEventListener('change', function() {
var link = document.getElementById('weiterLink');
if (this.value) { link.classList.remove('disabled');
} else {
link.classList.add('disabled');
}
});
</script>
Und das hier wäre im Css:
.disabled { pointer-events: none; opacity: 0.5; }
Wie wärs damit?
<body>
<div class="auswahl-box" data-wert="option1">Option 1</div>
<divclass="auswahl-box" data-wert="option2">Option 2</div>
<a id="weiterLink" href="seite2.html"class="disabled">
<div>Weiter</div>
</a>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('.auswahl-box').on('click', function() {
$('.auswahl-box').removeClass('selected');
$(this).addClass('selected');
$('#weiterLink').removeClass('disabled');
});
});
</script>
</body>
Für den Style nimmst du das von oben.
Aahhh ok jetzt verstehe ich!!! Also ich kannte den Befehl: "pointer-events: none" ganz einfach nicht! Das ist ja mega cool! Jetzt habe ich es folgendermaßen geschrieben (der Knopf heißt "weiter" und "addClass continue" wenn if):
#weiter {pointer-events: none;}
.continue {pointer-events: all !important;}
Ist das so programmiertechnisch sauber?
Außerdem habe ich noch ein Problem. Vorher hatte ich
#weiter {cursor: not-allowed;}
drin stehen. Das funktioniert nicht mehr sobald ich pointer-events: none; hinzufüge. Wie löse ich das Problem? LG
Nein, sorry, ich schreib den Code am Handy, deswegen ist der auch so schlecht formatiert.
Meine Idee wär jetzt vielleicht noch dem Ding einen Wrapper zu geben, vielleicht wirds dann was.
<div id="weiter-wrapper" class="disabled-wrapper">
<a id="weiter" href="seite2.html">
<div>Weiter</div>
</a>
</div>
Und im Script statt der letzten Zeile:
$('#weiter').addClass('continue');
$('#weiter-wrapper').removeClass('disabled-wrapper');
Und im CSS den Cursor Pointer auf den .disabled-wrapper zu verschieben
#weiter {
pointer-events: none;
color: gray;
}
#weiter.disabled-wrapper {
cursor: not-allowed;
}
Das gibt deinem Element basically einen „wrapper“, den man entfernt, indem man eine Option anklickt.
Das einzige Problem wäre jetzt noch, dass wenn man die Box deselectet, der Wrapper nicht wieder hinzugefügt wird. Weiß nicht ob du das willst.
Ein Wrapper ist immer eine Cheap Option, das ist klar, aber ich will nich nur für einen Cursor einen ganzen Wrapper erstellen. Ich hoffe immer auf einfache Lösungen. Ich hab sowieso schon DIVeritis, wie ich es immer nenne - zu viele Kästchen ineinander.
Verstehe. Dann kann mans mit Js versuchen.
Nimm den alten Code, und füg das mal in das document.ready hinzu:
$('#weiter').on('mouseenter', function() {
if (!$(this).hasClass('continue')) {
$(this).css('cursor', 'not-allowed');
}
});
Und update dein Css:
#weiter {
pointer-events: none;
}
#weiter.continue {
pointer-events: auto;
}
Das Problem lässt sich leicht lösen, indem du ein Formular verwendest. Für einen Fragebogen, der Nutzereingaben verlangt, solltest du das eh in Erwägung ziehen. Dafür sind die Formularelemente schließlich da. Eine Drumherum-Lösung mit div-Boxen und JavaScript ist kein guter Ersatz.
Beispiel:
<form action="seite2.html">
<label for="auswahl">Auswahl:</label>
<select id="auswahl" required>
<option disabled selected></option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<button>Weiter</button>
</form>
Das Formular leitet auf die nächste Seite weiter, sobald der Nutzer die Auswahlbox ausgefüllt hat und auf den Button klickt. Das required-Attribut gibt hierbei die Auswahlbox als Pflichtfeld vor.
Das Aussehen des Buttons kannst du mit CSS deinen Vorstellungen entsprechend ändern.
Das Problem hat sich schon ohne dieses dämliche (!) Formular gelöst! Div-Boxen sind viel besser als diese Formulare.
Formulare sind explizit für die Aufnahme von Nutzereingaben ausgerichtet. Sie sind für Nutzer daher besser bedienbar. Auch für Entwickler sind sie nicht sonderlich schwer nutzbar, immerhin bieten sie wie man oben sieht bereits viele Features, ohne dass man dafür selbst unbedingt etwas zusätzlich programmieren muss. Ich kann daher nur empfehlen, sich damit näher zu befassen.
Hallo vielen Dank für die Antwort. Leider habe ich Schwierigkeiten deine Antwort zu verstehen, weil ich 1.) keine Opacity verwenden will 2.) Jquery verwende und 3.) kein Formular erstelle, sondern nur div-Boxen - könntest du es entsprechen umschreiben, sodass ich verstehe, was du damit aussagen willst? Vielen Dank.