witam, mam następujący kod w funkcji wywoływanej poprzez kliknięcie:
document.createElement("action1");
var div1 = 'document.getElementById("action1")';
div1.classList.add("inaction");
div1.setAttribute("onclick","upgrade_clicked();");
div1.innerHTML = '<img src="img/click.png" width="40" height="40" /><span style="cursor: pointer;">Upgrade per click</span>';
document.getElementById("action").appendChild("action1");
i wyskakuje mi błąd " div1.classList is undefined ". Próbowałem również z setAttribute:
div1.setAttribute("class", "inaction");
ale dostaję błąd " div1.setAttribute is not a function". O co chodzi? Sam element action1 też nie jest tworzony.
Cały kod jeżeli się przyda:
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="container" class="container">
<div id="resources" class="resources">
<div id="coins" class="coins">
<span id="coin" class="coin">0 coins</span>
</div>
<div id="per_clicked" class="coins">
<span id="per_click" class="coin">0 per click</span>
</div>
</div>
<div id="main" class="main">
<div id="clicker" class="clicker">
<button class="btn" onclick="luck_function()"><img id="doge" class="doge" width="200" height="200" src="img/doge.png" /></button>
</div>
<div id="action" class="action">
</div>
<div id="shop" class="bottom_tiles" onclick="shop()">
<img class="bottom_imgs" src="img/shopping_cart.png" />
</div>
<div id="eq" class="bottom_tiles" onclick="eq()">
<img class="bottom_imgs" src="img/backpack.png" />
</div>
</div>
</div>
</body>
</html>
body
{
background-image: url("img/body_background.jpg");
user-select: none;
}
.container
{
width: 1200px;
margin-left: auto;
margin-right: auto;
min-height: 500px;
background-color: red;
}
.resources
{
background: linear-gradient(45deg, #e66465, #9198e5);
text-align: center;
font-size: 40px;
height: 200px;
width: 1198px;
padding: 1px;
}
.main
{
background-color: purple;
width: 1198px;
height: 300px;
padding: 1px;
}
.action
{
float: right;
width: 960px;
height: 202px;
background-color: green;
margin: 10px 10px 0px 0px;
}
.coins
{
height: 100px;
width: 500px;
border: 3px solid black;
margin: 40px 10px 0px 60px;
float: left;
}
.coin::before
{
content: "";
background-image:url(img/coin.png);
background-size: 100% 100%;
display: inline-block;
/*rozmiar ::before background*/
height: 50px;
width: 50px;
position: relative;
top: 15px;
}
.coin2::before
{
content: "";
background-image:url(img/coin.png);
background-size: 100% 100%;
display: inline-block;
/*rozmiar ::before background*/
height: 25px;
width: 25px;
position: relative;
top: 5px;
}
#per_clicked
{
font-size: 20px;
}
.clicker
{
width: 200px;
height: 200px;
background-color: purple;
margin: 10px 10px 10px 10px;
transition: 0.1s;
float: left;
}
.clicker:active
{
width: 210px;
height: 210px;
margin: 5px;
}
.doge
{
user-select: none;
transition: 0.1s;
}
.doge:active
{
width: 210px;
height: 210px;
}
.clicker img
{
display: block;
}
.btn
{
border: none;
padding: 0px;
cursor: pointer;
}
.inaction
{
width: 450px;
height: 71px;
margin: 17px 10px 0px 15px;
float: left;
background-color: red;
text-align: center;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: 0.3s;
}
.inaction:hover
{
width: 460px;
height: 81px;
margin: 7px 0px 0px 15px;
float: left;
background-color: red;
text-align: center;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.bottom_tiles
{
height: 50px;
width: 50px;
background-color: yellow;
cursor: pointer;
margin: 10px 10px 10px 10px;
transition: 0.3s;
clear: both;
display: inline-block;
}
.bottom_tiles:hover
{
width: 70px;
height: 70px;
margin: 5px 5px 5px 5px;
}
.bottom_imgs
{
display: block;
transition: 0.3s;
width: 50px;
height: 50px;
}
.bottom_imgs:hover
{
width: 70px;
height: 70px;
}
.relict
{
width: 25px;
height: 25px;
margin: 0px 5px 0px 0px;
}
var coins = 99999;
var coins_per_click = 1, upgrade_clicked_cost = 10;
var coins_per_second = 0, upgrade_per_second_cost = 100;
var luck = 0, upgrade_luck_cost = 1000;
var relict1 = 0, relict2 = 0, relict3 = 0, relict4 = 0;
var relict1_cost = 10, relict2_cost = 20, relict3_cost = 30, relict4_cost = 40;
window.onload = loading;
function loading()
{
coins_update();
per_clicked_update();
luck_function_per_second();
}
function coins_update()
{
document.getElementById("coins").innerHTML = '<span id="coin" class="coin">'+coins.toLocaleString('pl-PL')+' coins</span>';
}
function per_clicked_update()
{
document.getElementById("per_clicked").innerHTML = '<span id="per_click" class="coin2">'+coins_per_click+' per click | Upgrade cost: '+upgrade_clicked_cost+'</span> <br /> <span id="per_second" class="coin2">'+coins_per_second+' per second | Upgrade cost:'+upgrade_per_second_cost+'</span> <br /> <span id="luck" class="coin2">Luck: '+luck+'% for double coins | Upgrade cost: '+upgrade_luck_cost+' coins</span>';
}
function shop()
{
document.createElement("action1");
var div1 = 'document.getElementById("action1")';
div1.setAttribute("class", "inaction");
div1.setAttribute("onclick", "upgrade_clicked();");
div1.innerHTML = '<img src="img/click.png" width="40" height="40" /><span style="cursor: pointer;">Upgrade per click</span>';
document.getElementById("action").appendChild("action1");
}
function relict_shop()
{
document.getElementById("action1").innerHTML = '<img src="img/relict1_1.png" class="relict" /><span onclick="buy_relict(relict1_cost, 1)" style="cursor: pointer;">Buy ('+relict1_cost+' coins)</span>';
document.getElementById("action2").innerHTML = '<img src="img/relict2_1.png" class="relict" /><span onclick="buy_relict(relict2_cost, 2)" style="cursor: pointer;">Buy ('+relict2_cost+' coins)</span>';
document.getElementById("action3").innerHTML = '<img src="img/relict3_1.png" class="relict" /><span onclick="buy_relict(relict3_cost, 3)" style="cursor: pointer;">Buy ('+relict3_cost+' coins)</span>';
document.getElementById("action4").innerHTML = '<img src="img/relict4_1.png" class="relict" /><span onclick="buy_relict(relict4_cost, 4)" style="cursor: pointer;">Buy ('+relict4_cost+' coins)</span>';
}
function upgrade_clicked()
{
if(coins >= upgrade_clicked_cost)
{
coins_per_click++;
coins -= upgrade_clicked_cost;
upgrade_clicked_cost *= 2;
coins_update();
per_clicked_update();
}
else
{
document.getElementById("action1").innerHTML = 'You don\'t have enough coins';
setTimeout(function() {document.getElementById("action1").innerHTML = '<span onclick="upgrade_clicked()">Upgrade per click</span>';}, 2000)
}
}
function upgrade_per_second()
{
if(coins >= upgrade_per_second_cost)
{
coins_per_second++;
coins -= upgrade_per_second_cost;
upgrade_per_second_cost *= 2;
coins_update();
per_clicked_update();
}
else
{
document.getElementById("action2").innerHTML = 'You don\'t have enough coins';
setTimeout(function() {document.getElementById("action2").innerHTML = '<span onclick="upgrade_per_second()">Upgrade per second</span>';}, 2000)
}
}
function upgrade_luck()
{
if(luck == 100)
{
document.getElementById("action3").innerHTML = 'You have upgraded luck to the maximum level';
setTimeout(function() {document.getElementById("action3").innerHTML = '<span onclick="upgrade_luck()">Upgrade luck</span>';}, 2000)
}
else
{
if(coins >= upgrade_luck_cost)
{
luck++;
coins -= upgrade_luck_cost;
upgrade_luck_cost *= 2;
coins_update();
per_clicked_update();
}
else
{
document.getElementById("action3").innerHTML = 'You don\'t have enough coins';
setTimeout(function() {document.getElementById("action3").innerHTML = '<span onclick="upgrade_luck()">Upgrade luck</span>';}, 2000)
}
}
}
function luck_function()
{
var lucky_number = Math.floor(Math.random()*100)+1;
if(lucky_number<=luck) //trafiono w luck
{
coins += coins_per_click*2;
relict_bonuses(4);
}
else
{
coins += coins_per_click;
}
relict_bonuses(1);
}
function luck_function_per_second()
{
var lucky_number = Math.floor(Math.random()*100)+1;
if(lucky_number<=luck)
{
coins += coins_per_second*2;
}
else
{
coins += coins_per_second;
}
relict_bonuses(2);
setTimeout("luck_function_per_second()", 1000);
}
function buy_relict(cost, relict)
{
if(coins >= cost)
{
coins -= cost;
coins_update();
switch(relict)
{
case 1:
relict1_cost *= 2;
relict1++;
coins_per_click++;
break;
case 2:
relict2_cost *= 2;
relict2++;
coins_per_second++;
break;
case 3:
relict3_cost *= 2;
relict3++;
break;
case 4:
relict4_cost *= 2;
relict4++;
luck++;
break;
}
per_clicked_update();
relict_shop();
}
else
{
switch(relict)
{
case 1:
document.getElementById("action1").innerHTML = 'You don\'t have enough coins';
setTimeout(function() {document.getElementById("action1").innerHTML = '<img src="img/relict1_1.png" class="relict" /><span onclick="buy_relict(relict1_cost, 1)" style="cursor: pointer;">Buy ('+relict1_cost+' coins)</span>';}, 2000)
break;
case 2:
document.getElementById("action2").innerHTML = 'You don\'t have enough coins';
setTimeout(function() {document.getElementById("action2").innerHTML = '<img src="img/relict2_1.png" class="relict" /><span onclick="buy_relict(relict2_cost, 2)" style="cursor: pointer;">Buy ('+relict2_cost+' coins)</span>';}, 2000)
break;
case 3:
document.getElementById("action3").innerHTML = 'You don\'t have enough coins';
setTimeout(function() {document.getElementById("action3").innerHTML = '<img src="img/relict3_1.png" class="relict" /><span onclick="buy_relict(relict3_cost, 3)" style="cursor: pointer;">Buy ('+relict3_cost+' coins)</span>';}, 2000)
break;
case 4:
document.getElementById("action4").innerHTML = 'You don\'t have enough coins';
setTimeout(function() {document.getElementById("action4").innerHTML = '<img src="img/relict4_1.png" class="relict" /><span onclick="buy_relict(relict4_cost, 4)" style="cursor: pointer;">Buy ('+relict4_cost+' coins)</span>';}, 2000)
break;
}
}
}
function eq()
{
document.getElementById("action1").innerHTML = '<img src="img/relict1_1.png" class="relict" /> x'+relict1+' (+'+relict1+' per click)';
document.getElementById("action2").innerHTML = '<img src="img/relict2_1.png" class="relict" /> x'+relict2+' (+'+relict2+' per second)';
document.getElementById("action3").innerHTML = '<img src="img/relict3_1.png" class="relict" /> x'+relict3+' (+'+relict3+' coins if lucky)';
document.getElementById("action4").innerHTML = '<img src="img/relict4_1.png" class="relict" /> x'+relict4+' (+'+relict4+'% luck)';
}
function relict_bonuses(relict)
{
switch(relict)
{
case 1:
coins += relict1;
break;
case 2:
coins += relict2;
break;
case 3:
coins += relict3;
break;
}
coins_update();
}