• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

nie wychodzi mi tworzenie elementu w js

VPS Starter Arubacloud
+1 głos
210 wizyt
pytanie zadane 11 lipca 2021 w JavaScript przez Doge Gaduła (3,320 p.)

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

 

2 odpowiedzi

+2 głosów
odpowiedź 11 lipca 2021 przez VBService Ekspert (251,210 p.)
wybrane 11 lipca 2021 przez Doge
 
Najlepsza

Metoda document.createElement(',..') tworzy element html z podanej nazwy, co w Twoim przypadku spowoduje

console.log(document.createElement("action1"));

chyba nie o to Tobie chodziło  wink, chcesz utworzyć element div w

<div id="action" class="action"></div>

więc

function shop()
{
  const div1 = document.createElement("div");
  div1.setAttribute("id", "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(div1);
}

 

 

Tu masz Moim zdaniem dobry tutorial: Tworzenie i usuwanie elementów

+2 głosów
odpowiedź 11 lipca 2021 przez adrian17 Ekspert (344,100 p.)
var div1 = 'document.getElementById("action1")';

Bo div1 to string o tej zawartości, a nie element.

komentarz 11 lipca 2021 przez Doge Gaduła (3,320 p.)
kiedy nie dam apostrofów, to dostaję błąd "div1 is null"
3
komentarz 11 lipca 2021 przez adrian17 Ekspert (344,100 p.)

Bo... nie ma w dokumencie elementu o ID `action1`.

Proponuję poczytać jeszcze dokumentację, bo co drugą funkcję używasz nie tak jak się powinno:

document.createElement("action1");
document.getElementById("action").appendChild("action1");

 

komentarz 11 lipca 2021 przez Doge Gaduła (3,320 p.)
gdzie jest najlepiej o tym poczytać?
2
komentarz 11 lipca 2021 przez adrian17 Ekspert (344,100 p.)
Gdziekolwiek zobaczyłeś createElement i appendChild, tam z pewnością pokazują też poprawne użycie.

A w ogólności, MDN to zawsze dobre źródło: https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

Podobne pytania

0 głosów
2 odpowiedzi 206 wizyt
pytanie zadane 2 lipca 2019 w JavaScript przez michal_php Stary wyjadacz (13,700 p.)
0 głosów
1 odpowiedź 334 wizyt
pytanie zadane 19 listopada 2020 w C i C++ przez Karson Obywatel (1,000 p.)
–2 głosów
1 odpowiedź 158 wizyt
pytanie zadane 11 sierpnia 2019 w JavaScript przez bugs55 Obywatel (1,090 p.)

92,452 zapytań

141,262 odpowiedzi

319,077 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...