Fatal编程技术网
  • javascript/
  • A如何使用javascript添加Imageview？5.

A如何使用javascript添加Imageview？5.

javascript php html

A如何使用javascript添加Imageview？5.,javascript,php,html,Javascript,Php,Html,我想用html css和一些javascript预订音乐会门票/座位，为什么我不能预订座位。。。我想我的javascript代码有一些错误，因为当我想预订座位时，座位背景会从红色变为绿色，但它不会显示座位号 索引 在控制台F12 localStorage.clear（）中按；要删除预订，您的问题来自本地存储。当你有 foglasok=\u get（'foglasok'）； foglalasok是一个字符串，因此您不能真正执行此操作 \u集（'foglalasok'，foglalasok）；

我想用html css和一些javascript预订音乐会门票/座位，为什么我不能预订座位。。。我想我的javascript代码有一些错误，因为当我想预订座位时，座位背景会从红色变为绿色，但它不会显示座位号

索引

在控制台F12 localStorage.clear（）中按；要删除预订，您的问题来自本地存储。当你有

foglasok=\u get（'foglasok'）；
foglalasok是一个
字符串
，因此您不能真正执行此操作

\u集（'foglalasok'，foglalasok）；
您应该做的是解析
foglalasok

foglalasok=JSON.parse（_get（'foglalasok'））；
它与
pandas
无关，因此我正在删除
pandas
标签…请不要垃圾邮件标签 
<!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>

<!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>

<!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>

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)); }

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;
}