Verwandte Themen

Frage
von Tob210
26.11.2021, 15:32
Wie überprüfe ich mit JS oder PHP welche HTML Checkbox in einem Form ausgewählt wurde, bevor es abgesendet wurde?

Wie in der Langen Frage geschrieben, ich suche Code der es mir ermöglicht über Java Skript oder PHP auszuwerten welche Checkbox geklickt wurde.

            <input type="checkbox" class="radio-multichoice" name="abteilung:1">

            <label for="frei" align="center"><strong> Abteilung FF </strong></label><br>

            <input type="checkbox" class="radio-multichoice" name="abteilung:1">

            <label for="workS" align="center"><strong> Abteilung W </strong></label><br>

            <input type="checkbox" class="radio-multichoice" name="abteilung:1">

            <label for="MO" align="center"><strong> Abteilung O </strong></label><br>

Im allgemeinen Nutze ich bereits die Funktion in JS damit der User nur ein Element auswählen kann. Doch nun bräuchte ich eine Direkte Ausgabe je nachdem welches Element ausgewählt wurde. D.h. Ich suche eine Möglichkeit auszuwerten welches angeklickt wurde und dann möchte ich etwas ausführen über if, eles if, else.

Falls es helfen sollte hier habe ich die Begrenzung Methode für das anklicken.

   //Dieser Code überprüft ob drei Elemente ausgewählt wurden. Wenn dies der fall ist dann werden alle weiteren Element Blockiert.

   const groups = [...document.getElementsByClassName("radio-multichoice")].reduce((result, element) => {

 result[element.name] = result[element.name] || [];

 result[element.name].push(element);

 return result;

}, {});

for (const [name, elements] of Object.entries(groups)) {

 const limit = name.split(":")[name.split(":").length-1];

 for(const el of elements) {

  el.addEventListener("change", e => {

   if (elements.filter(x => x.checked).length > limit) {

     e.target.checked = false;

   }

  });

 }

}

Könnte mir dabei jemand Helfen, falls ihr nachfragen habt weil ich es mal wieder nicht richtig erklären konnte stellt bitte eine Nachfrage.

Computer, HTML, Webseite, programmieren, JavaScript, PHP, Webentwicklung
2 Antworten
Frage
von elomenatyStinkt
21.11.2021, 22:46
Mit Links
CSS Grid Webseite funktioniert nicht?

Das Layout für die Webseite funktioniert nicht. Ich habe das Problem lange gesucht, aber nicht gefunden. Ich wäre über jegliche Hilfe dankbar.

CSS:

.container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-template-areas:
    h h h h h h
    c c c c c s
    c c c c c s
    c c c c c s
    c c c c c s
    f f f f f s
}

.footer {
  grid-area: f;
}

.header {
  grid-area: h;
}

.content {
  grid-area: c;
}

.side {
  grid-area: s;
}

HTML-Datei:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="style.css" rel="stylesheet">
  <nav>
</head>
<body class="container">
  <title>Eigene Webseite von ---</title>
  <header class="header">
    <h1>Hauptseite meiner Webseite</h1>
  </header>
  <main class="content">
    <div id="abstand">
      <h3>Interessen:</h3>
      <ul>
        <li>Technik</li>
        <li>Videospiele</li>
      </ul>
      <u><h3>Ich bin:</h3></u>
      <p>Optimistisch<br>Geduldig<br>Hilfsbereit</p>
      <a id="link" href="https://www.netflix.com/at/">Mein Link</a>
      <div>
        <div id="bild">
          <img src="bild1.jpg" width=300 height=186 alt="Bild über mich">
        </div>
      </div>
      <div id="Motte"></div>
    </div>
  </main>
  <aside class="side">
    <p>News/Einträge</p>
  </aside>
  <div class="daten">
    <footer class=footer>
      <h4>Hier könnte ein Motto stehen</h4>
    </footer>
    <div id="daten">
      <p>---</p>
      <p>--</p>
      <a href="----</a>
    </div>
  </div>
</div>
</nav>
</body>
</html>
HTML, CSS
2 Antworten
Frage
von crRaphi
20.11.2021, 19:11
Navigation ausklappbar <html/CSS>?

Hallo,

ich möchte eine Navigation bauen, die wenn man hovert noch Unterpunkte anzeigt. Ich habe es so gemacht und komme leider nicht mehr weiter, wenn sich die Navigation ausklappt soll es ganz oben angezeigt werden. Ich habe einen Button unter der Navigation und als ich es selbst versucht hatte, zeigte es mir das Ausgeklappte hinter dem Button.

HTML:

    <header>
        <nav>
            <ul>
                <li><a href="">Hallo</a>
                    <ul>
                        <li><a href="">Hallo</a></li>
                    </ul>
                </li>
                <li><a href="">Hallo</a>
                    <ul>
                        <li><a href="">Hallo</a></li>
                        <li><a href="">Hallo</a></li>
                    </ul>
                </li>
                <li><a href="">Hallo</a></li>
                <li><a href="">Hallo</a></li>
                <li><a href="">Hallo</a></li>
                <li><a href="">Hallo</a></li>
            </ul>
        </nav>


    </header>

CSS:

header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: darkblue;
  height: 1.5cm;
  
}


header li {
  float: left;
}


header li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


header li a:hover:not(.active) {
  background-color: rgb(195, 251, 255);
  color: black;
  height: 29px;
  font-weight: bolder;
}


header .active {
  background-color: #00e1ff;
  height: 21px;
  height: 29px;
  font-weight: bolder;
  color: darkblue;
}

Ich hoffe, dass mir irgendjemand helfen

Danke im voraus

Ps.: Das "Hallo" ist ein Platzhalter.

HTML, Programmierer, programmieren, CSS, Programmiersprache, Webdesign, Visual Studio Code
1 Antwort
Frage
von Tastaturbrix
19.11.2021, 21:17
Mit Bildern
Bootstrap Layout?

Hallo,

arbeite momentan mit Bootstrap (Blazor) an einer Webseite.

Ich habe in meinem Container 3 Rows, wobei jede Row 3 Card Elemente hat.
Wenn ich nun aber mein Browserfenster kleiner mache verrutscht der Text:

Code:

<div class="container-fluid">


    <div class="row">
        <h3>Suche:</h3>
    </div>


    <div class="row p-2">
        <div class="row">
            <div class="row">
                <h2>Liste</h2>  
                <hr />
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
            <div class="col col-md-3">
                <div class="card h-100">
                    <p class="card-body card-text">This card on the left of the other two cards, with a fixed height and scrolling.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Das Layout passt sich schon an, der innere Text aber nicht warum ?
Liegt es daran das ich ein <p> Tag verwende ?
Wie kann ich in Zukunft sowas verhindern ?

Sollte so aussehen:

Bild zum Beitrag
HTML, Webseite, programmieren, CSS, Visual Studio, Frontend, Bootstrap, Angular
1 Antwort
Frage
von The2nd
17.11.2021, 21:09
Was ist da schief (JS)?

Starte ich das Programm so beginnt es so wie ich es will. Irgendwann wird dann aber ein Fehler gezeigt

("main.js:27 Uncaught TypeError: Cannot read properties of null (reading 'setAttribute')

  at ClickIt (main.js:27)

  at clickvol2 (main.js:21)

  at HTMLParagraphElement.<anonymous> (main.js:30))

und mehrere Flächen farbig markiert und man muss manchmal doppelt klicken. Wo liegt hier der Fehler?

JS:
"use strict";

let genNum = function() {

    let gen = Math.random() * 9;

    let num = Math.round(gen);

    let numers = ["null", "eins", "zwei", "drei", "vier", "fünf", "sechs", "sieben", "acht", "neun"];

    let final = (numers[num]);

    if(final === "zehn") {

        genNum()

    }

    return final;

};

let i = 0;

document.getElementById("Punkteanzahl").textContent = i;

let clickvol2 = function() {

    if (document.querySelector("#eins", "#zwei", "#drei", "#vier", "#fünf", "#sechs", "#sieben", "#acht", "#neun").hasAttribute("class")) {

        console.log(".")

    } else {

        ClickIt(genNum())

    }};

let ClickIt = function(num) {

    let hash = "#";

    let ident = hash.concat(num);

    document.querySelector(ident).setAttribute("class", "click");

    document.querySelector(ident).addEventListener("click", function() {

    document.querySelector(ident).removeAttribute("class");

    clickvol2();

    i++;

})

};

ClickIt(genNum());

console.log(document.getElementById("Punkteanzahl").textContent)

Computer, HTML, programmieren, CSS, JavaScript
2 Antworten
Frage
von komplettratlos
15.11.2021, 13:58
Wie kann ich Zeilenumbrüche in einer E-Mail einfügen (PHP)?

Hallo,

ich habe mit HTML und PHP ein Kontaktformular erstellt, welches mir per E-Mail zugesendet wird.

Die einzelnen Felder in der E-Mail werden aber einfach hintereinander weg geschrieben und ich möchte Absätze nach jedem Feld einfügen, damit die E-Mail etwas schöner aussieht.

Hier der Code:

if (isset($_POST["submit"])) {
  mail("email-adresse", "Kontaktformular", 'Firma: '.$_POST["Firma"].'Branche: '.$_POST["Branche"].'Anrede: '.$_POST["Anrede"].
  'Name: '.$_POST["Name"].'Straße: '.$_POST["Straße"].'PLZ, Ort: '.$_POST["PLZ,Ort"].'Telefon: '.$_POST["Telefon"].'E-Mail: '.$_POST["E-Mail"].'Anmerkung: '.$_POST["Anmerkung"]);
?>
<h1 class="erfolg">Danke für Ihre Anfrage!</h1>
<?php
  }
?>
<form action="Kontakt.php" method="post">
  <legend>Kontaktformular</legend>
  <br>
  <!-- Titel für Eingabefelder -->
  <p>
    <label>Firma</label><br>
    <input type="text" name="Firma">
  </p>
  <p>
    <label>Branche</label><br>
    <input type="text" name="Branche">
  </p>
  <p>
    <label for="Anrede">Anrede*</label><br>
    <select name="Anrede" required>
      <option></option>
      <option>männlich</option>
      <option>weiblich</option>
      <option>divers</option>
    </select>
  </p>
  <p>
    <label>Name*</label><br>
    <input type="text" name="Name" required placeholder="">
  </p>
  <p>
    <label>Straße</label><br>
    <input type="text" name="Straße">
  </p>
  <p>
    <label>PLZ, Ort</label><br>
    <input type="text" name="PLZ, Ort">
  </p>
  <p>
    <label>Telefon</label><br>
    <input type="text" name="Telefon">
  </p>
  <p>
    <label>E-Mail*</label><br>
    <input type="email" name="E-Mail" required>
  </p>
  <p>
    <label>Anmerkung</label><br>
    <textarea rows="10" name="Anmerkung" placeholder=".">
    </textarea>
  </p>
  <p>
    <button type="submit" name="submit"><a>Versenden!</a></button>
  </p>
</form>
E-Mail, HTML, IT, Webseite, programmieren, PHP
5 Antworten
Frage
von MrHibo
06.11.2021, 23:15
Mit Bildern
Einzelne Schriften in HTML Bearbeiten?

Hallo,

ich habe vor kurzem begonnen eine Website mit HTML zu programmieren, dazu nutze ich Visual Studio Code, aber ich mache das ganz noch nicht so lange, also kenne ich mich noch nicht so gut aus. Zurzeit versuche ich eine Tabelle mit verschiedenen Raritäten zu erstellen. Dazu soll z.B. "Rare" einen blauen Rahmen bekommen, so ähnlich wie in Bild 1 zusehen.

Ich habe schon versucht es zu schaffen, dennoch habe ich bisher nur hinbekommen um alles einen Rahmen zu kreieren.

Meine Frage ist nun, wie man das individuell anpassen kann. So brauche ich die Rahmen nur bei den Namen der Raritäten und diese sollen jeweils eine eigene Farbe haben (z.B. "Rare" = blau, "Epic" = Violett usw.). Außerdem soll der Rahmen genau passen. So ist es bei mir oben so, dass es für "Uncommon" passt, aber für "Epic" viel zu groß ist. Meine Skills in HTML reichen bisher nur die Rahmen für alle zu machen. Ich habe den Style so gemacht:

CSS:

table tr td
{
  font-size: 1.2em;
  background: #fff;
  color: black;
  border-radius: 20px;
  padding: 4px 10px;
}

Vermutlich nicht besonders gut, aber da hoffe ich auf eure Hilfe 😅 Falls es euch etwas hilft, schreib' ich hier noch ein Beispiel hin, wie ich die Tabelle gemacht habe (das Richtige ist natürlich länger)

HTML:

<table>
  <thead>
    <tr>
      <th>Eyes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Normal</td>
      <td>23.99%</td>
      <td>Common</td>
    </tr>
  </tbody>
  <tfoot>
  </tfoot>
</table>
Bild zum Beitrag
Computer, HTML, programmieren, CSS, Webdesign, Visual Studio Code
5 Antworten

Meistgelesene Fragen zum Thema HTML
Mehr meistgelesene Fragen zu HTML