A how can i add a Imageview with javascript ? 5

Viewed 96

i wanted to make a concert ticket / seat reservation, using html css and some javascript, somewhy i cannt make a seat reservation... i think my javascript code got some errors, because when i want to make the reservation the seats background turns from red to green, but it wont show me off the seats number...

INDEX

<!DOCTYPE html>
<html>
<head>
    <!--
    Console-ban (f12) ha bírod, hogy: localStorage.clear(); Akkor törli a foglalást.
    -->
    <meta charset="utf-8" />
    <title>Kezdőoldal</title>
    <link rel="stylesheet" href="styles/main.css" />
</head>
<body>
    <a href="utasitas.html">Használati utasítás</a>
    <a href="szerzorol.html">A szerzőről</a>
    <a href="index.html" class="active">Kezdőoldal</a>
    <div id="nagy">
    <span class="ules" style="pointer-events: none;visibility: hidden;margin-right: 0;"></span>
    </div>
    <br /><br />
    <form>
        Ülés száma: <input type="text" id="ules" readonly="true" /><br />
        Név és vezetéknév: <input type="text" id="nev" /><br>
        E-mail: <input type="email" id="email" /><br>
        <input type="button" value="Lefoglalás" id="lefoglal" />
    </form>
    <script type="text/javascript" src="scripts/main.js"></script>
</body>
</html>

OF THE AUTHOR

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>A szerzőről</title>
    <link rel="stylesheet" href="styles/main.css" />
</head>
<body>
    <a href="utasitas.html">Használati utasítás</a>
    <a href="szerzorol.html" class="active">A szerzőről</a>
    <a href="index.html">Kezdőoldal</a>
    <p>Apró Dániel</p>
    MESC 4ITM
</body>
</html>

HOW TO USE IT

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Használati utasítás</title>
    <link rel="stylesheet" href="styles/main.css" />
</head>
<body>
    <a href="utasitas.html" class="active">Használati utasítás</a>
    <a href="szerzorol.html">A szerzőről</a>
    <a href="index.html">Kezdőoldal</a>
    <p>
    Rákattintasz az ülésre, beviszed a kért adatokat és rákattintasz a lefoglalásra
    </p>
</body>
</html>

JAVASCRIPT SNIPPET

var foglalasok = [],
    nagy = document.getElementById('nagy'),
    nev = document.getElementById('nev'),
    email = document.getElementById('email'),
    ules = document.getElementById('ules'),
    szabad_ulesek,
    foglalo_ules;

if (_get('foglalasok') != undefined) {
    foglalasok = _get('foglalasok');
}

for (var i = 1; i < 52; i++) {
    var u = document.createElement('span');
    u.innerHTML = (i+1);
    u.className = (foglalasok.includes(i+1+'')) ? 'foglalt ules' : 'szabad ules';
    nagy.appendChild(u);
    if ((i+1) % 4 == 0) nagy.appendChild(document.createElement('br'));
}

szabad_ulesek = document.getElementsByClassName('szabad')

for (var i = 0; i < szabad_ulesek.length; i++) {
    szabad_ulesek[i].addEventListener('click',function(){
        ules.value = this.innerHTML;
        foglalo_ules = this;
    });
}
document.getElementById('lefoglal').addEventListener('click',function() {
    if (ules.value == '' || nev.value == '' || email.value == '') {
        alert('Töltsön ki minden mezőt!');
        return;
    }
    foglalasok.push(ules.value);
    ules.value = nev.value = email.value = '';
    _set('foglalasok', foglalasok);
    foglalo_ules.className = 'ules foglalt';
    location.reload();
});
function _set(name,value) { localStorage.setItem(name,JSON.stringify(value)); }
function _get(name) { return JSON.parse(localStorage.getItem(name)); }

STYLE

body {
    font-family: Arial,sans;
}
form {line-height: 2em;}
.ules {
    display: inline-block;
    padding: 10px;
    margin: 5px;
    width: 30px;
    text-align: center;
    cursor: pointer;
}
.szabad {
    background: lime
}
.foglalt {
    background: red;
    pointer-events: none;
}
#nagy {
    display: inline-block;
    outline: 2px solid gray;
    padding: 5px;
}
a {
    text-decoration: none;
    display: inline-block;
    float: right;
    color: black;
    padding: 8px;
    border: 1px solid black;
    margin: 0 2px;
}
.active {
    text-decoration: underline;
}

Pressing in console F12 localStorage.clear(); to delete the reservation

1 Answers

Your problem comes from your your localStorage. when you have

foglalasok = _get('foglalasok');

foglalasok is a String, so you can't really do

_set('foglalasok', foglalasok);

what you should to is to parse foglalasok

foglalasok = JSON.parse(_get('foglalasok'));
Related