Div anzeigen, wenn Radio-Button "checked" ist - von Anfang an?

Hi,

ich habe hier eine Grupe von Radio-Buttons. Immer, wenn ein Radio-Button "checked" ist, soll ein div erscheinen. Funktioniert auch alles, aber das JS erkennt nicht, dass ja bereits per Default "red" ausgewählt ist:

https://jsfiddle.net/w1maq8wa/

Man muss in diesem Beispiel "red" noch mal anklicken, obwohl es bereits checked ist.

Kann mir jemand helfen?

Danke!

4 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, JavaScript, JQuery

17.05.2017, 23:54

Algorithmus in Funktion auslagern
Funktion 2x aufrufen: Wenn das Dokument fertig geladen wurde und bei Klick.

Angepasstes Skript: https://jsfiddle.net/w1maq8wa/12/

Babelfish

18.05.2017, 08:34

Hatte ich auch erst vor, war mir aber zu viel Arbeit. ;-)

capfly

17.05.2017, 22:38

Pack die div Funktion in eine extra Funktion und starte diese beim Laden der Seite

jeseix

Fragesteller

17.05.2017, 22:46

Hab dich entweder falsch verstanden oder es funktioniert nicht..

regex9

17.05.2017, 23:52

@jeseix

Nein, die Lösung ist so schon richtig.

Babelfish

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, JavaScript

17.05.2017, 23:47

Ganz einfach, initiiere am Anfang gleich einen Klick:

$('input[type="radio"]:checked').click();

https://jsfiddle.net/w1maq8wa/10/

Gruß

Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

jeseix

Fragesteller

18.05.2017, 08:32

Danke! Das hat geklappt!

der2000erTyp

17.05.2017, 22:47

Wops, mir ist gerade eine bessere Idee eingefallen:

Schreib einfach deine Meldung(also, dass am Anfang schon "rot" ausgewählt wurde) manuell rein in die Seite, das ist die faulste und effektivste Lösung.

jeseix

Fragesteller

17.05.2017, 23:00

Und wie? Das ist alles zusammenkopiert, brauche es nur ein mal für ein ganz kleines Projekt. Ich habe ungefähr 0,0002%-JS-Verständnis. ;D

der2000erTyp

17.05.2017, 23:05

@jeseix

Sry, kann dir grad kein JSFiddle Beispiel zeigen, weil ich am Handy bin.

Du musst eig. nur die eine neue Box-Class unter den Radiobuttons einkopieren. Die CSS-Werte kopierst du von .Box

...zur Frage

Buttons in einem div in einem a-Tag ansprechen?

Ich habe das Problem das ich ein "div" habe, das in einem ist, also selber als Verlinkung dient. In diesem "div" habe ich jedoch noch drei Buttons, die dann nicht mehr ansprechbar sind, da das ganze "div" ja ein Hyperlink ist. Ich möchte also das ich wenn ich auf einen der Buttons klicke, eine separate Aktion erfolgt und wenn ich nur in das "div" klicke ohne einen Button zu betätigen eine andere Aktion erfolgt. Damit ihr es ein bisschen besser versteht hänge ich noch einen Screenshot von der Situation an, hoffe man versteht es einigermaßen.

...zur Frage

Wie kann ich in HTML einen Button machen, der, wenn er geklickt wird, weitere Buttons erscheinen lässt?

Hey Leute Ich stelle grade eine seite mit HTML auf. Ich wollte eigentlich einen Button einbauen der, wenn er geklickt wird die Seite darunter aufklappen lässt und weitere Buttons zum vorschein kommen. Ich weiss das man das irgendwie mit Js machen kann, bin mir aber nicht sicher wie.

Vielen Dank schonmal LG Nicolai:)

...zur Frage

JQuery: Wie kann ich eine div mit class nach Klick auf einen Button einfügen?

Moin,

vielleicht finde ich hier eine Hilfe. Vielen Dank im Voraus für jede Hilfe.

Ich sitze gerade an einem Projekt und wurde mit dem Frontend beauftragt. Ich besitze leider zwar keinerlei Programmierkenntnisse, bin aber gewillt, mich entsprechend daran zu setzen und mir die Grundlagen beizubringen.

Nun möchte ich einen Button generieren, der mir nach einem Klick ein neues <div>-Element in meinem DOM erzeugt und dabei auch eine bestimmte Klasse zugewiesen bekommt.

Probiert habe ich das Ganze wie folgt:

$("#btn1").click(function(){
  $("p").append("<div> Test </div>");
  div.addClass("operator")
});

So hat das aber leider nicht geklappt. Das Ganze lässt sich hier besser visualisieren und testen: https://www.w3schools.com/code/tryit.asp?filename=GBQJV6O2UFXH

Ein der class entsprechendes Design mit den Attributen habe ich per CSS bereits geschrieben. Da allerdings in der reinen HTML der <div>-Tag nicht vorliegt, wird mir das erst natürlich nicht angezeigt. Logisch. Erst nach dem Klick auf den Button soll der

<div class="operator">

Einzug in das DOM finden.

Wie kriege ich das hin?

Danke.

...zur Frage

Button im Div responsiv machen?

https://jsfiddle.net/z7ew09ru/

Hallo,

hat jemand eine Idee, wie ich den "JETZT BESTELLEN" Button responsiv mache (von den Drei Divs ganz abgesehen)?

Die Handy Version ist zwar noch nicht fertig und die Seite ist noch ein ganzer Müll, aber jetzt schießt der grüne Bestellbutton schon über sein Div hinaus und ich habe wirklich keine Ahnung, was geändert werden muss.

Vielen Dank

Stefan

...zur Frage

Wie in CSS eine Sidebar erstellen, die den Content meiner Webseite verschiebt?

Hallo zusammen,

ja ich weiß, es klingt ziemlich kompliziert was ich suche, aber das ist es eigentlich gar nicht. Ich habe zwei Divs auf meiner Webseite. Div 1 ist ein Button und div 2 soll eine Sidebar werden. Wenn ich den Button drücke, dann soll Div 1 verschwinden und Div 2 auftauchen. Das klappt auch alles via JS wunderbar und ohne Probleme.

Nun würde ich jedoch gerne, dass der Content meiner Webseite (neben der Sidebar) nun zentriert wird (ist bereits der Fall), jedoch auch zentriert wird wenn die Sidebar eingeblendet wird. Also als ob man das Browser-Fenster verkleinert und dann die Sidebar anzeigt.

Ich hoffe ihr habt verstanden was ich will und könnt mir eventuell helfen.

Danke sehr!

...zur Frage

JavaScript: Text nach Button-Klick in Textfeld?

Ich habe so eine Seite :

<li class="items">
    <p>some text 1</p>
    <div><button class="link" value="1">Wählen</a></div>
</li>
<li class="items">
    <p>some text 2</p>
    <div><button class="link" value="2">Wählen</a></div>
</li>
<li class="items">
    <p>some text 3</p>
    <div><button class="link" value="3">Wählen</a></div>
</li>



<form action="send" method="POST">
    <input type="text" name="text" id="text" required>
    <input type="number" name="zahl" id="zahl">
    <button type="submit" name="submit">Senden</button>
</form>

oben sind mehrere Texte mit je einem Button zum Auswählen (derzeit ohne funktion). Unten ist dann ein Formular und man kann selbst die Zahl des Textes dort eintragen.

Jetzt will ich das aber für leute vereinfachen und ermöglichen, dass man einfach auf den jeweiligen Button klickt und dann die Zahl (das value des Buttons) in das textfeld "number" eingetragen wird. Wie kann ich das mit javascript machen ? außerdem sollte der cursor direkt in das textfeld "text" gehen.

...zur Frage

Mit Javascript Button anklicken?

Man kann mit Javascript und einer url diese in einem neuen Tab/Fenster öffnen. Wenn diese geöffnet wurde, ist es dann auch mit Js möglich auf jener Website einen Button anzuklicken?

...zur Frage

Download Button, für Image in HTML und CSS und JS?

Hallo zusammen

Ich will ein Foto herunterladen mithilfe eines buttons, oder links. wie soll ich dies tun.
Das Problem ist, das mit das Foto immer nur im Browser angezeigt wird, und nicht heruntergeladen.

Freundliche Grüsse

...zur Frage

Warum über JavaScript Events?

man kann ja in seinen html code onclick oder was auch immer für ein Event hinschreiben.

ich sehe trotzdem bei vielen Profis immer das hier

Html : 

<body>
<button id='MeinButton'>Senden</button>
</body>

js: 

document.querySelector('#MeinButton').addEventListener('click', MeineFunktion);

function MeineFunktion(){
event.preventDefault();
Alert(1);
}

einfacher wäre das hier

<body>
<button onclick='MeineFunktion();' id='MeinButton'>Senden</button>
</body>
function MeineFunktion(){
event.preventDefault();
Alert(1);
}

Und wieso muss man prevent default hinschreiben ?
Was genau macht der browser denn by default / standardmäßig das es sonst nicht funktioniert ?

...zur Frage

Javascript, Button ein Bild zuweisen?

Ich habe eine HTML datei mit Javascript verknüpft. Nun habe ich in HTML mehrere Buttons, aber ich möchte in Javascript den Buttons ein Bild zuweisen.

Ich habe bereits gefunde wie man ein Bild ladet aber nicht wie man es einen Button zuweist.

Ich bitte um Hilfe

let example = new Image();
example.src= "example.png";

...zur Frage

Warum funktioniert dieser code nicht?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beta</title>
    <script>
        const bodyElement = document.querySelector("body");

        function setColorBlue() {
            bodyElement.background-color = "blue";
        };

        function setColorRed() {
            bodyElement.background-color = "red";
        };

        function setColorGreen() {
            bodyElement.background-color = "green";
        }
    </script>
</head>
<body>
    <div class="color-picker">
        <button onclick="setColorBlue()">Blue</button>
        <button onclick="setColorRed()">Red</button>
        <button onclick="setColorGreen()">Green</button>

    </div>
</body>
</html>

...zur Frage

Java Script Text ändern durch OnClick?

Hallo,

wie der Code https://jsfiddle.net/m0Lbpvy4/ zeigt, will ich, dass sich bei Klick auf einen Text, sich der Text ändert.

Folgendes Problem:

In dem Bild ist zu sehen, dass der Input Button nicht im Div bleibt. Das mag an width: auto liegen, wenn ich es aber entferne, ist nicht der ganze Text zu sehen.

Jemand eine Lösung für das Problem?

...zur Frage

Wie kann ich mit JS ein div mit der zugehörigen ID erstellen?

Ich habe das Problem, dass ich mit dem Befehl:

document.getElementById("main_div").innnerHTML = "<div></div>"

ein neues div-Element (auf einer bereits leeren Seite) erstellen möchte. Das hat mit dem obenstehenden Befehl auch gut geklappt. Jetzt wollte ich aber dem div noch eine ID hinzufügen. Das habe ich wie folgt versucht:

document.getElementById("main_div").innnerHTML = "<div id="evaluation"></div>"

Das hat nicht geklappt. Ich gehe davon aus, dass das Problem bei den gedoppelten Anführungsstrichen liegt.

Gibt es dafür eine Lösung?

Danke im Voraus!

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen