Znikający DIV

pytanie zadane 20 czerwca 2017 w JavaScript przez hiper007 Stary wyjadacz (11,270 p.)
zamknięte 20 czerwca 2017 przez hiper007

Witam mam diva oto kod html:

<div id="info">

<?php
echo "Witaj użytkowniku ".'<span style="color:red; font-weight:bold;">'.$_SESSION["login"]."</span> !"."<br>";
echo '<input type="submit" value="Zamknij" onclick="close();"/>'.'<br>';
echo "Teraz możesz w pełni korzytać z Forum SHH!"."<br>";
echo "Pozdrawiam serdecznie Administrator Serwisu!";
?>

</div>

Kod CSS:

#info
{
width:400px;
height:100px;	
padding:20px;
background-color:#27a38d;
color:white;
text-align:center;
position:absolute;
margin-left:auto;
margin-right:auto;
opacity:1.0;
z-index:1000000000000000000;
border-radius:15px;
line-height:25px;
}

Kod JS:

<script>

	function close()
{
	document.getElementById('info').style.display ="none";
}	
		
 </script>

Wyświetla mi sie Div. Ale chcę po naciśnięciu przycisku wewnątrz diva, żeby on zniknął i nie był widoczny ;) Ale nie działa...

komentarz zamknięcia: Problem rozwiązany

komentarz 21 czerwca 2017 przez Chess Szeryf (76,710 p.)

Jeśli koniecznie chcesz, aby to był <input type="submit" ..., to możesz użyć takiej konstrukcji:

<div id="info">
	<form onsubmit="event.preventDefault();myFunction();">
	   <?php
	   echo "Witaj użytkowniku ".'<span style="color:red; font-weight:bold;">'.'jajko'."</span> !"."<br>";
	   echo '<input type="submit" value="Zamknij"/>'.'<br>';
	   echo "Teraz możesz w pełni korzytać z Forum SHH!"."<br>";
	   echo "Pozdrawiam serdecznie Administrator Serwisu!";
	   ?>
    </form>
</div>


<script>
 
function myFunction(){
	document.getElementById('info').style.display ="none";
}   
         
</script>

2 odpowiedzi

odpowiedź 20 czerwca 2017 przez Michał Kazula Pasjonat (19,540 p.)
wybrane 20 czerwca 2017 przez hiper007

Najlepsza

<!DOCTYPE html>
<html>
<head>
<style> 
#info
{
width:400px;
height:100px;   
padding:20px;
background-color:#27a38d;
color:white;
text-align:center;
position:absolute;
margin-left:auto;
margin-right:auto;
opacity:1.0;
z-index:1000000000000000000;
border-radius:15px;
line-height:25px;
}
</style>
</head>
<body>

<p>Click the "Try it" button to set the display property of the DIV element to "none":</p>

<div id="info">
 
<?php
echo "Witaj użytkowniku ".'<span style="color:red; font-weight:bold;">'.$_SESSION["login"]."</span> !"."<br>";
echo '<button onclick="myFunction()">Try it</button>'.'<br>';
echo "Teraz możesz w pełni korzytać z Forum SHH!"."<br>";
echo "Pozdrawiam serdecznie Administrator Serwisu!";
?>
 
</div>

<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

<script>
function myFunction() {
    document.getElementById("info").style.display = "none";
}
</script>

</body>
</html>

Zamień

<input type="submit" value="Zamknij" onclick="close();"/>

<button onclick="myFunction()">Try it</button>

odpowiedź 20 czerwca 2017 przez Kornelia Kobiela Nałogowiec (33,340 p.)

Już tłumaczę, co zachodzi. Ale najpierw trochę ponarzekam. Zamiast onclick użyj addEventListener. Koniec narzekania.

Jeżeli robisz type="submit", to zawartość strony się automatycznie przeładowuje i wraca do stanu wyjściowego. Dlatego nie widzisz efektu. Jeżeli chcesz więcej, to swego czasu napisałam artykuł na temat zdarzeń w JS: http://kot-zrodlowy.pl/javascript/programowanie/2017/04/26/zdarzenia-w-js-z-czym-to-si%C4%99-je.html . Znajdziesz tam rozwiązania popularnych problemów. Pozdrawiam