Zmiana tekstu danej rzeczy po kliknięciu na nią

pytanie zadane 12 stycznia 2016 w HTML i CSS przez toster234 Początkujący (370 p.)

Witam, co zrobić aby tekst <label for='bt'>Zamknij</label> po kliknięciu zmienił się na <label for='bt'>Donate</label>

Cały kod html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link href="styl.css" rel="stylesheet" type="text/css" />
        <title></title>       
    </head>
	<body>
<div class='testClick'>
            <input type='checkbox' id='bt' name='controls' checked=''/>
            <label for='bt'>Zamknij</label>
            <div class='pp'>Testowy popup</div>
        </div>   

    </body>
</html>

Kod CSS:

.testClick input[type=checkbox] {
    visibility:hidden;
}
.testClick label {
    position:absolute;
    background:#ffffff;
    min-width:20px;
    min-height:20px;
}
.pp {
    width:200px;
    height:100px;
    border:3px solid green;
    
    text-align:center;
    line-height:100px;
    position:absolute;
    top:calc(50% - 50px);
    left:calc(50% - 100px);
    background:#FFFFFF;
    z-index:9999999;
    display:none;
}
.testClick input[type=checkbox]:checked~.pp{
    display:block;
}

1 odpowiedź

odpowiedź 12 stycznia 2016 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 12 stycznia 2016 przez toster234

Najlepsza

Zrób EventListenera, ustaw go na label, a w momencie zdarzenia 'click' wykonaj label.innerHTML = 'Donate';

komentarz 12 stycznia 2016 przez toster234 Początkujący (370 p.)

Pokazał byś jak to zrobić ?

komentarz 12 stycznia 2016 przez ScriptyChris Mędrzec (190,190 p.)

https://jsfiddle.net/Chriss92/af8u74j7/

komentarz 12 stycznia 2016 przez toster234 Początkujący (370 p.)

Bardziej chodzi o pokazanie jak to wkleić na stronę aby działało :/

I jak by się zmieniło na donate a potem "klikneło" na niego to żeby było znowu zamknij to jaki kod ?

komentarz 12 stycznia 2016 przez ScriptyChris Mędrzec (190,190 p.)

Bardziej chodzi o pokazanie jak to wkleić na stronę aby działało :/

Tzn? Kod JavaScript wrzuć do tagu <script></script>

I jak by się zmieniło na donate a potem "klikneło" na niego to żeby było znowu zamknij to jaki kod ?

https://jsfiddle.net/Chriss92/af8u74j7/1/

komentarz 12 stycznia 2016 przez toster234 Początkujący (370 p.)

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link href="styl.css" rel="stylesheet" type="text/css" />
        <title></title>       
		
					<script type="text/javascript">

 	var label = document.querySelector('label[for="bt"]');
	label.addEventListener('click', function(ev)
	{
		var t = ev.target.innerHTML;

		 if (t === 'Zamknij')
		 {
			 label.innerHTML = 'Donate';
		 }
		 else if (t === 'Donate')
		 {
			 label.innerHTML = 'Zamknij';
		 }

	}, false);
		
</script>
    </head>
	<body>
<div class='testClick'>
            <input type='checkbox' id='bt' name='controls' checked=''/>
            <label for='bt'>Zamknij</label>
            <div class='pp'>Testowy popup</div>
        </div>	

    </body>
</html>

Tak ?
Bo mi nie za bardzo działa...

komentarz 12 stycznia 2016 przez ScriptyChris Mędrzec (190,190 p.)

Co konkretnie Ci nie działa? Klikając na napis 'Zamknij' - zmieniasz go na 'Donate' i vice versa.

[edit]

Aaa, umieść tag script (wraz z zawartością) na koniec body.

Bo teraz, gdy w head masz skrypt, to on "chce" już działać na etykiecie, która dopiero zostanie stworzona w body, a ono powstaje później (tzn. JavaScript szuka elementu, którego jeszcze nie ma).