Mulla on kehitteillä hyvin yksinkertainen luvun arvauspeli: https://petke.info/arvaaluku.html Ideana on syöttää luku ohjelmalle ja ohjelma kertoisi aina, onko sen arpoma luku suurempi vai pienempi kuin pelaajan arvaama luku. Eräänlaisella binäärihaullahan sen luvun nopeiten saa selville. Koska olisi arvattava luku 1...1000, niin ensin syöttää luvun 500. Jos oikea eli arvottu luku on suurempi, niin seuraavaksi syöttää luvun 750, jos taas pienempi, niin syöttää luvun 250 jne... En ole onnistunut toeteuttamaan versiota, missä sivua ladattaessa arvottaisiin aina uusi luku, mikä pitäisi "arvata", kun sivu arpoo aina uuden luvun! Ilmeisesti ongelma on johtunut siitä, että koska luku syötetään lomakkeesta, niin ohjelma lataa sivun uudestaan ja arpoo aina uuden luvun? En ole muuta selitystä keksinyt. Kässäättekö probleeman? Nyt olen joutunut fiksaamaan koodiin yhden luvun ja on tylsää, kun ohjelmalla ei pysty arpomaan uutta lukua :( Ja vielä tylsempää että arvattavan luvun näkee tietysti Javascriptin koodista.
<html>
<body>
<center>
<img src="arvaa.jpg">
<h2>Kirjoita arvaamasi luku ja paina "ENTER"</h2>
<form>
<input id="myInputtext" autofocus type="text">
<button src="dummy.gif" id="myInput" onclick="myFunction()"></button>
</form>
<script>
var input = document.getElementById("myInput"); //koodi, mikä tarkkailee ENTER:n painallusta
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("myBtn").click();
}
});
function myFunction () {
var arvattuluku=myInputtext.value;
if (arvattuluku<372) {alert("Oikea luku on suurempi");}
if (arvattuluku>372) {alert("Oikea luku on pienempi");}
if (arvattuluku==="372") {alert("Arvasit oikein! Hienoa! :)");}
}
</script>
</center>
</body>
</html>Ongelma on tosiaan se, että tuossa lähetät lomakkeen. Tuo keyup-kuuntelija on täysin väärä, koska jos fokus on tekstikentässä, tietenkään napille ei tule enterin painallusta, ja myöskään koodissa esiintyvää myBtn-elementtiä ei ole olemassakaan.
Lomakkeen lähetys kannattaa estää submit-tapahtumassa, tai koodista voi jättää koko lomakkeen pois.
Lomakkeen kanssa voisit tehdä yksinkertaisesti näin:
<form id="lomake">
<input id="arvaus" type="text">
<button type="submit">Mobiilikäyttäjille, joilla ei ole enteriä lähetykseen...</button>
</form>
<script>
document.getElementById("lomake").addEventListener("submit", function(e) {
e.preventDefault(); // Estetään lähetys.
const arvaus = +this.arvaus.value;
alert("Arvasit: " + arvaus);
});
</script>Ilman lomaketta koko ongelmaa ei ole, mutta silloin enterin painallus pitäisi tosiaan erikseen itse tunnistaa (tekstikentässä, ei napissa).
Ok, kiitos. Vastauksesi tuli kuin apteekin hyllyltä... En vaan sitten kuitenkaan osaa tehdä toimivaa versiota, kun tää ei toimi: https://petke.info/arvaaluku2.html :(
Mitenköhän nuo vertailut pitäisi tehdä? Ja missä kohti? Kysynkö tyhmiä? Siis ei tuu mitään alert ilmoituksia noiden vertailujen perusteella.
EDIT: Ahaa, koska syötetään tekstiä, niin pitääkö se muuttaa numeroksi? EDIT2: Ei auttanut :(
<center>
<img src="arvaa.jpg">
<form id="lomake">
<input id="arvaus" type="text">
<button type="submit">Mobiilikäyttäjille, joilla ei ole enteriä lähetykseen...</button>
</form>
<script>
const luku = Math.floor(Math.random() * 1000) + 1;
document.getElementById("lomake").addEventListener("submit", function(e) {
e.preventDefault(); // Estetään lähetys.
const arvaus = +this.arvaus.value;
if (luku === arvaus) {alert("Arvasit oikein! Hienoa! :)")
if (arvaus>luku) {alert("Oikea luku on pienempi");}
if (arvaus<luku) {alert("Oikea luku on suurempi");}
});
</script>Jospa painaisit F12 ja katsoisit selaimen kertomia virheilmoituksia, niin huomaisit ehkä, että ensimmäiseltä alert-riviltäsi puuttuu nyt ;} ja näin ollen koodissa on syntaksivirhe eikä sitä ajeta.
No nyt rupes toimimaan. Mulla oli Javascriptissä pilkkuvirheitä:
https://petke.info/arvaaluku2.html
:) :)
Metabolix kirjoitti:
Jospa painaisit F12 ja katsoisit selaimen kertomia virheilmoituksia, ....
Jep! Kiitos! Olenkin aina kiroillut vähän Javascript ohjelmoinnin vaikeuksien kanssa, kun ei tuu mitään virheilmoituksia. Toi neuvo auttaa paljon!
Aihe on jo aika vanha, joten et voi enää vastata siihen.