✔ Bild mit onclick

K

Kalito

Erfahrenes Mitglied
Ich habe folgenden Code

Code: 
    <script language="JavaScript" type="text/javascript">

    function CheckRadio()
    {
    //Modell
      if (document.getElementById('mann').checked==true)
      {
        document.getElementById('M').style.display = 'block';
        document.getElementById('F').style.display = 'none';
      }
      if (document.getElementById('frau').checked==true)
      {
        document.getElementById('M').style.display = 'none';
        document.getElementById('F').style.display = 'block';
      }
    }
   //-->
    </script>

                    <div>

                        <ul>
                            <li><input type="radio" name="geschlecht" id="mann" onclick="javascript:CheckRadio('M');" checked="checked" />Mann</li>
                            <li><input type="radio" name="geschlecht" id="frau" onclick="javascript:CheckRadio('F');" />Frau</li>
                        </ul>
                    </div>

                    <div id="M" style="display:block;">
                        Mann
                    </div>
                    <div id="F" style="display:none;">
                        Frau
                    </div>

Inwieweit muss ich mein JS-Teil umbauen, das ich anstatt der 2 radiobutton 2 Bilder verwenden kann.

Wenn ich Frau klicke, soll das div Frau sichtbar werden und bei Mann das div mann halt


Folgender code hat nicht geklappt

Code: 
    <script language="JavaScript" type="text/javascript">

    function CheckRadio()
    {
    //Modell
      if (document.getElementById('mann').checked==true)
      {
        document.getElementById('M').style.display = 'block';
        document.getElementById('F').style.display = 'none';
      }
      if (document.getElementById('frau').checked==true)
      {
        document.getElementById('M').style.display = 'none';
        document.getElementById('F').style.display = 'block';
      }
    }
   //-->
    </script>
<div>

                        <button type="button" id="mann" onclick="javascript:CheckRadio('M');">
                            <img src="mann.jpg" width="106" height="109" alt="Mann" />
                        </button>
                        <button type="button" id="frau" onclick="javascript:CheckRadio('F');">
                            <img src="frau.jpg" width="106" height="109" alt="frau"/>
                        </button>
                    </div>

                    <div id="M" style="display:block;">
                        Mann
                    </div>
                    <div id="F" style="display:none;">
                        Frau
                    </div>
 
Du übergibst ja beim onclick den passenden Parameter. Den musst du dann nur benutzen.

Javascript: 
function CheckRadio(id)
{
    document.getElementById(id).style.display = 'none';

    //Das jeweils andere wieder sichtbar machen
    document.getElementById( (id === 'M' ? 'W' : 'M') ).style.display = 'block';
}
 
Ja, es muss natürlich ein "F" anstelle des "W" sein ;)

Javascript: 
(id === 'M' ? 'F' : 'M')
 
@CPoly: so klappt bei mir der Wechsel auch nicht richtig.


So geht es auf jeden Fall:

HTML: 
<script language="JavaScript" type="text/javascript">

function CheckRadio(id) {
if (id == "M") {
    document.getElementById('M').style.display = 'block';
    document.getElementById('F').style.display = 'none';
}

if (id == "F") {
    document.getElementById('M').style.display = 'none';
    document.getElementById('F').style.display = 'block';
}
}

</script>

<div>
    <img src="mann.jpg" width="106" height="109" alt="Mann" id="mann" onclick="javascript:CheckRadio('M');"/>
    <img src="frau.jpg" width="106" height="109" alt="frau" id="frau" onclick="javascript:CheckRadio('F');"/>
</div>

<div id="M" style="display:block;">
    Mann
</div>
<div id="F" style="display:none;">
    Frau
</div>
 
Interessant, da ich es 1zu1 in eine Textdatei kopiert habe.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Page title</title>
</head>

<body>
	<script type="text/javascript">
	function CheckRadio(id)
	{
		document.getElementById(id).style.display = 'block';
		
		//Das jeweils andere wieder sichtbar machen
		document.getElementById( (id === 'M' ? 'F' : 'M') ).style.display = 'none';
	}
	</script>
	<div>
	<button type="button" id="mann" onclick="javascript:CheckRadio('M');">
		<img src="mann.jpg" width="106" height="109" alt="Mann" />
	</button>
	<button type="button" id="frau" onclick="javascript:CheckRadio('F');">
		<img src="frau.jpg" width="106" height="109" alt="frau"/>
	</button>
	</div>

	<div id="M" style="display:block;">
		Mann
	</div>
	<div id="F" style="display:none;">
		Frau
	</div>
</body>

</html>
 
Komisch, wenn ich jetzt den obigen Code nehme, dann klappt es bestens.

Vielleicht lag es zuerst an der (relativ) frühen Uhrzeit oder es liegt am Regen (oder womöglich doch an mir?).
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück