the values should be arranged horizontally however the values are appearing the wrong way.
dog = new item("dog", 10, 1, 1, "button.png");
cat = new item("cat", 5, 1, 1, "button.png");
horse = new item("horse", 2, 1, 1, "button.png");
10, 1, 1
5, 1, 1,
2, 1, 1
While I couldn’t quite understand why, the values are presented from top to bottom, instead of your intended from left to right. To fix that the simplest way is to switch the values to the “right” places according to their presentation, as the following:
10, 5, 2
1, 1, 1
1, 1, 1
Or as it’ll look in the code:
dog = new item("dog", 10, 5, 2, "button.png");
cat = new item("cat", 1, 1, 1, "button.png");
horse = new item("horse", 1, 1, 1, "button.png");
class item{
constructor(name, value, pc, ps, src) {
this.value = value;
this.pc = pc;
this.ps = ps;
console.log(name);
this.id = name;
this.src = src;
document.getElementById("banner").innerHTML = document.getElementById('banner').innerHTML+"<div id="+this.id+"><p>"+this.id+"</p><p id=value>"+this.value+"</p><p>"+this.id.charAt(0)+"pc</p><p id="+this.id.charAt(0)+"pc>"+this.pc+"</p><p>"+this.id.charAt(0)+"ps</p><p id="+this.id.charAt(0)+"ps>"+this.ps+"</p></div>";
document.getElementById("clicks").innerHTML = document.getElementById("clicks").innerHTML + "<img src="+this.src+" alt='"+this.id+". A clickable button. This image could not be loaded' id="+this.id+"Button class=button onclick='"+this.id+".click()'></img>"
//setInterval(this.tick, 1000);
}
click(){
this.value = this.value + this.pc;
console.log(this.value);
}
tick(){
this.value = this.value + this.ps;
console.log(this.value);
};
}
dog = new item("dog", 10, 5, 2, "button.png");
cat = new item("cat", 1, 1, 1, "button.png");
horse = new item("horse", 1, 1, 1, "button.png");
h1{
color: white;
margin:2mm;
}
body{
background: #0f0f0f;
font-family: Courier New, Lucida Console, monospace;
margin:0;
color: white;
}
.banner{
background: #363636;
margin-top:0;
margin-left:0;
margin-bottom:0;
margin-right:0;
display: flex;
flex-direction: row;
justify-content: center;
}
.banner > *{
padding-left:0.5mm;
padding-right:0.5mm;
}
.button{
width: 40mm;
height: 40mm;
background: red;
}
.pannel{
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Clicker Engine V2</title>
</head>
<body>
<div id=clicks class=pannel><div id=banner class=banner></div></div>
</body>
</html>
I have found the issue. I was simply not arranging the items inside the item divs. This issue was easily solved with the following css:
.banner > *{
display: flex;
flex-direction: row;
justify-content: center;
}
This left the final code as:
class item{
constructor(name, value, pc, ps, src) {
this.value = value;
this.pc = pc;
this.ps = ps;
console.log(name);
this.id = name;
this.src = src;
document.getElementById("banner").innerHTML = document.getElementById('banner').innerHTML+"<div id="+this.id+"><p>"+this.id+"</p><p id=value>"+this.value+"</p><p>"+this.id.charAt(0)+"pc</p><p id="+this.id.charAt(0)+"pc>"+this.pc+"</p><p>"+this.id.charAt(0)+"ps</p><p id="+this.id.charAt(0)+"ps>"+this.ps+"</p></div>";
document.getElementById("clicks").innerHTML = document.getElementById("clicks").innerHTML + "<img src="+this.src+" alt='"+this.id+". A clickable button. This image could not be loaded' id="+this.id+"Button class=button onclick='"+this.id+".click()'></img>"
//setInterval(this.tick, 1000);
}
click(){
this.value = this.value + this.pc;
console.log(this.value);
}
tick(){
this.value = this.value + this.ps;
console.log(this.value);
};
}
dog = new item("dog", 10, 1, 1, "https://pngimg.com/uploads/buttons/buttons_PNG51.png");
cat = new item("cat", 5, 1, 1, "https://pngimg.com/uploads/buttons/buttons_PNG51.png");
horse = new item("horse", 2, 1, 1, "https://pngimg.com/uploads/buttons/buttons_PNG51.png");
h1{
color: white;
margin:2mm;
}
body{
background: #0f0f0f;
font-family: Courier New, Lucida Console, monospace;
margin:0;
color: white;
}
.banner{
background: #363636;
margin-top:0;
margin-left:0;
margin-bottom:0;
margin-right:0;
display: flex;
flex-direction: row;
justify-content: center;
}
.banner > *{
padding-left:0.5mm;
padding-right:0.5mm;
display: flex;
flex-direction: row;
justify-content: center;
}
.button{
width: 40mm;
height: 40mm;
background: red;
}
.pannel{
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Clicker Engine V2</title>
</head>
<body>
<div id=clicks class=pannel><div id=banner class=banner></div></div>
</body>
</html>
I am creating a clicker engine. Essentially the goal is to have a product where people can easily create a basic clicker game with upgrades. I am using classes to achieve this an I am fairly inexperienced with JS and HTML.
In my code it should be able to create the buttons and values (currently unchanging) easily. The buttons should go down and the values should be arranged horizontally however the values are appearing the wrong way.
Please not that the cat, dog, and horse variables are simply placeholders and will be changed however the code must not depend on there being X buttons.
Thanks in advance!
Here is my code:
class item{
constructor(name, value, pc, ps, src) {
this.value = value;
this.pc = pc;
this.ps = ps;
console.log(name);
this.id = name;
this.src = src;
document.getElementById("banner").innerHTML = document.getElementById('banner').innerHTML+"<div id="+this.id+"><p>"+this.id+"</p><p id=value>"+this.value+"</p><p>"+this.id.charAt(0)+"pc</p><p id="+this.id.charAt(0)+"pc>"+this.pc+"</p><p>"+this.id.charAt(0)+"ps</p><p id="+this.id.charAt(0)+"ps>"+this.ps+"</p></div>";
document.getElementById("clicks").innerHTML = document.getElementById("clicks").innerHTML + "<img src="+this.src+" alt='"+this.id+". A clickable button. This image could not be loaded' id="+this.id+"Button class=button onclick='"+this.id+".click()'></img>"
//setInterval(this.tick, 1000);
}
click(){
this.value = this.value + this.pc;
console.log(this.value);
}
tick(){
this.value = this.value + this.ps;
console.log(this.value);
};
}
dog = new item("dog", 10, 1, 1, "https://pngimg.com/uploads/buttons/buttons_PNG51.png");
cat = new item("cat", 5, 1, 1, "https://pngimg.com/uploads/buttons/buttons_PNG51.png");
horse = new item("horse", 2, 1, 1, "https://pngimg.com/uploads/buttons/buttons_PNG51.png");
h1{
color: white;
margin:2mm;
}
body{
background: #0f0f0f;
font-family: Courier New, Lucida Console, monospace;
margin:0;
color: white;
}
.banner{
background: #363636;
margin-top:0;
margin-left:0;
margin-bottom:0;
margin-right:0;
display: flex;
flex-direction: row;
justify-content: center;
}
.banner > *{
padding-left:0.5mm;
padding-right:0.5mm;
}
.button{
width: 40mm;
height: 40mm;
background: red;
}
.pannel{
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Clicker Engine V2</title>
</head>
<body>
<div id=clicks class=pannel><div id=banner class=banner></div></div>
</body>
</html>
This would be great, however this would not work as the value, ps and pc so do different things. Additionally, I am attempting to make it easy to use, allowing people to create a game without prior experience in programming. Thanks anyway!
