Wątek przeniesiony 2015-11-13 12:36 z Webmastering przez dzek69.
Witam,mam pewien problem.
Pisze skrypcik,który przeliczy przeliczy pewną wartość.
function cukier()
{
var x=document.getElementById("masa").value;
var y=parseInt(x);
var lc =y/1.5;
document.getElementById("wynik").innerHTML = "Ilość łyżeczek cukru to:" + lc;
Skrypt działa,tylko w divie o nazwie wynik pojawia się tylko na chwile.
za mało danych, żeby Ci pomóc, najlepiej daj link do strony, a jak nie to chociaż wklej kod HTML i JS w całości.
<html lang="PL">
<head>
<meta charset="utf-8">
<?php
function printDate()
{
$data = date("D-d-m-Y");
echo($data);
}
?>
<script src="przelicznik.js"></script>
<link rel="Stylesheet" type="text/css" href="style.css" />
<title>Stronka</title>
</head>
<body>
<div id="nagl">Nagłówek
</div>
<div id="menu"><a href="kuchnia.html">Strona Główna</a> <a href="przepisy.html">Przepisy</a> <a href="przelicznik.html">Przelicznik Wag</a>
</div>
<div id="tre">
<form action="">
Podaj masę produktu:
<br>Masa w dag:<input type="text" id="masa">
<button onclick="cukier()">Przelicz!</button>
</form>
<div id="wynik"></div>
</div>
<div id="cos"><?PHP printDate() ?>
</div>
<div id="stopka">
</div>
</body>
</html>
Wywal znaczniki form :) A tak przy okazji to skrypty importuj na dole dokumentu tuż przed znacznikiem body i nie korzystaj z tego ochydnego atrybutu onclick, tylko zrób to normalnie za pomocą js'a
document.getElementById("przelicz").onclick = cukier;
Usunięcie <form> pomogło wielkie dzięki :)
Trochę nie rozumiem jak za pomocą skryptu mam wywołać funkcję.
Teraz informacja dlaczego usunięcie form pomogło: Otóż, klikając przycisk potwierdzający formularz - powodujesz wysłanie formularza do serwera i przeładowanie strony z odpowiedzią od serwera. U Ciebie pewnie nawet serwera nie ma, albo w żaden sposób nie przetwarza wyniku, więc po prostu widzisz przeładowanie strony. Teoretycznie formularz powinien zostać w tagu <form> - dla semantyki, natomiast powinno się z poziomu JS blokować jego wysłanie - ale na początek można po prostu usunąć ten formularz i też będzie ok.
Co do dopinania zdarzeń nie inline czyli nie poprzez onclick w HTML - losowy kurs: http://kursjs.pl/kurs/events.html
4ftmanager napisał(a):
Trochę nie rozumiem jak za pomocą skryptu mam wywołać funkcję.
W html'u dodaj do przycisku id, potem w skrypcie, po deklaracji funkcji wklejasz to co napisał @Desu, z tym, że po cukier dodajesz (), czyli będzie całość wyglądać tak
document.getElementById("twoje-id").onclick = cukier();
Możesz też użyć <a href=https://developer.mozilla.org/pl/docs/Web/API/Element/addEventListener">addEventListener</a>, niby bardziej elegancki.
Możesz też zdarzenia podpinać do tagów document.getElementsByTagName("tag"), klasdocument.getElementsByClassName("klasa");, użyć querySelector(document.querySelector("selektor"); do którego możesz przekazać nazwę tagu, id bądź klasę używając selektorów CSS ("div > a" jak najbardziej możliwe) lub querySelectorAll document.querySelectorAll("selektor"); </code>. querySelector pobierze pierwszy element, który spełnia dany warunek, czyli <code> document.querySelector(".jakis_div") zwróci pierwszy element z klasą ".jakis_div". Pozostałe elementy zwrócą obiekt NodeList zawierający wszystkie pobrane elementy. Aby podpiąć zdarzenie do elementów w NodeList musisz je dodatkowo "wybrać", albo poprzez wskazanie określonego elementu, np.
var foo = document.querySelectorAll(".jakis_element");
foo[0].style.display = "none";
co spowoduje ukrycie pierwszego elementu. Zamiast tego możesz też wybierać elementy w pętli for, np.
var foo = document.querySelectorAll(".jakis_element");
for (var i = 0; i < foo.length; i++) {
foo[i].style.display = "none";
}
Dzięki czemu ukryjesz wszystkie elementy z klasą ".jakis_element".
Po więcej szczegółów musisz zajrzeć do dokumentacji.
To tak na zapas, bo pewnie niedługo do tego dotrzesz ;)
P.S. Tak odnośnie onclick (i kilku innych dobrych praktyk, jak np. niemieszanie HTML'u z JS'em) - Angular z tego korzysta i jakoś niespecjalnie widzę krytykę i oburzenie na takie podejście ;)
Możesz też użyć addEventListener, niby bardziej elegancki.
addEventListener pozwala dodać kilka eventów na raz w kilku różnych miejscach kodu. Robiąc tak jak ja napisałem masz możliwość przypisać to tylko raz, bo każde kolejne przypisanie nadpisze poprzednie, to jest główna róznica. Tak jakbyś zrobił:
var user = { name: "Kamil" };
user.name = "Michał";
user.name = "Bartek";
user.name // Bartek
z tym, że po cukier dodajesz (),
Nie może dodać () bo to wywoła funkcję zaraz po tym jak interpreter tam dojdzie wczytując stronę. do onclick przypisujesz referencje do funkcji czyli bez (). Później gdzieś tam w kodzie jak klikniesz na button to javascript robi tak jakby tak
// O user kliknął w button odpalam event
button.onclick(); // tutaj dopiero wywołanie.