Keskustelu: Ohjelmointikysymykset: JavaScript: Teatteri paikkojen varaus ja tekstistä kuvaksi

MR94 [25.04.2022 09:53:36]

Tee ohjelma, jolla käyttäjä voi varata teatterista haluamansa paikan. Paikat on numeroitu välillä 1 - 30. Varaus tapahtuu antamalla paikan numero.

Ohjelman pitäisi ilmoittaa, jos paikka on jo varattu. Ohjelman pitäisi myös näyttää, mitkä paikat ovat vapaita ja mitkä varattuja.

Ohjelman käynnistyessä kaikki paikat ovat vapaita eli varauksia ei tallenneta.

Voit itse suunnitella ohjelman käyttöliittymän. Käyttöliittymän ulkoasu ei vaikuta arvosteluun.

Yksinkertaisemmassa toteutuksessa voit vaikka tulostaa pelkät varattujen paikkojen numerot ilman tyylejä

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
</head>
<body onload="alusta();">
	<h2>Teatteri</h2>
    <br>
    X = Varattu O = Vapaa
    <br>
    <br>
   <b> Anna paikan numero:</b>
   <br>
    <input id="paikka"/>
    <button type="button" onclick="varaaPaikka();">Varaa</button>
    <br/>

    <h1 id="tulostusAlue"></h1>
    <script>
    let paikat = ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30"]
    console.log(paikat [0]);


        function alusta(){
            document.getElementById(paikka).focus();
        }
        function varaaPaikka(){
            let tulostus = "";
            document.getElementById("tulostusAlue").innerHTML = "";
            let paikka = document.getElementById(paikka).value;
if (paikka 1 && paikka >= 30){
    tulostus = "Vapaa"
}
else {
    tulostus = "Paikka on jo varattu"
}
}
        }
    </script>




</body>
</html>

MR94 [25.04.2022 09:56:32]

Toinen on HTML-sivu, jossa on linkkejä (vähintään kolme kappaletta). Kun hiiri viedään linkin ylle, ilmestyy sivulle linkin kohdetta esittelevä kuva. Jokaisesta linkistä ilmestyy erilainen kuva. Kuvat tulevat aina samaan kohtaan sivua.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <ul>
        <li><h9 <a href="https://archive.org/"> <img id="otsikko" src="kuva1.jpg" onmouseover= "vaihdakuva ()"
        onmouseout = "vaihdaTakaisin">Archive</h9></li>
        <li><h9 <a href="https://archive.org/"> <img id="otsikko" src="kuva2.jpeg" onmouseover= "vaihdakuva ()"
            onmouseout = "vaihdaTakaisin">Wikipedia</h9></li>

            <li><h9 <a href="https://archive.org/"> <img id="otsikko" src="kuva3.jpeg" onmouseover= "vaihdakuva ()"
                onmouseout = "vaihdaTakaisin">Google</h9></li>
        </ul>
        <script>
function vaihdaKuva(){
	document.getElementById("otsikko").src = "kuva1.jpg" && "kuva2.jpeg" && "kuva3.jpeg";
}
function vaihdaTakaisin(){
	document.getElementById = "otsikko" ;
}
</script>
    </body>
</html>

Lebe80 [25.04.2022 13:03:54]

UI/UX -asiaa.

Jos ruudulle tulostetaan jo kaikki teatteripaikat, pitääkö paikan valinta tapahtua input-kentällä, vai voisiko tähän keksiä jonkin toisen tavan?

En myöskään ymmärtänyt, oliko viesteissä jokin ongelma, johon tarvitsit apua?

Metabolix [25.04.2022 20:14:52]

Koulutyöt pitää tehdä itse. Apua voi kysyä, mutta ainakin nämä koodit ovat niin kaukana kuvaillusta toiminnasta tai edes toimivasta ohjelmasta, että oletko edes käynyt kurssia ja oletko tehnyt mitään muita yksinkertaisempia ohjelmia?

Esimerkiksi mitä olet ajatellut näissä tapahtuvan:

if (paikka 1 && paikka >= 30){

src = "kuva1.jpg" && "kuva2.jpeg" && "kuva3.jpeg";

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen