How can I make a default state/Clear the container and replace with new items using HTML/CSS/JS
Question
Hello I want to do something very specific and I have scoured stackoverflow but I cant figure out or find it. As seen in the below I want to replace the current container content with the new content user asked for but it appends below the current one(which I dont want) and I have tried remove(), removechild() nothing helps. Also after each pressing button for each property I want the triangle to return to its default state(without animations). So is there a temporary way to add classes or animations using javascript. This is Expected when I click create and This is what I am getting.
Here is the code:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Trying out CSS
</title>
<script src="main.js" defer></script>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="upper">Into the Mysteries of Pascal Triangle #Placeholder</div>
<div class="menu">
<div><button class="box" onclick="createHexs()">Create</button></div>
<div><input type="text" id="Text1" maxlength="2 " size="5" style="margin: 5px;">
Type a number between 1 to 11.
</div>
</div>
<div class="menu">
<div><button class="box" onclick="property1()">Property 1</button></div>
<div><button class="box" onclick="">Property 2</button></div>
<div><button class="box" onclick="">Property 3</button></div>
<div><button class="box" onclick="">Property 4</button></div>
<div><button class="box" onclick="">Property 5</button></div>
<div><button class="box" onclick="">Property 6</button></div>
<div><button class="box" onclick="">Property 7</button></div>
</div>
<div class="menu">
</div>
<div id="createhexagons"></div>
<div id='workspace'>
<div class="container">
<div class="row">
<div class="hexagon"><div class="text">1</div></div>
</div>
<div class="row">
<div class="hexagon"><div class="text">1</div></div>
<div class="hexagon"><div class="text">1</div></div>
</div>
<div class="row">
<div class="hexagon"><div class="text">1</div></div>
<div class="hexagon"><div class="text">2</div></div>
<div class="hexagon"><div class="text">1</div></div>
</div>
<div class="row">
<div class="hexagon"><div class="text">1</div></div>
<div class="hexagon"><div class="text">3</div></div>
<div class="hexagon"><div class="text">3</div></div>
<div class="hexagon"><div class="text">1</div></div>
</div>
<div class="row">
<div class="hexagon"><div class="text">1</div></div>
<div class="hexagon"><div class="text">4</div></div>
<div class="hexagon"><div class="text">6</div></div>
<div class="hexagon"><div class="text">4</div></div>
<div class="hexagon"><div class="text">1</div></div>
</div>
</div>
</div>
<div class="lower">LOWER FOOTER</div>
</body>
</html>
CSS
.row {
margin-bottom: -30px;
}
.upper{
background-color: red;
height: 75px;
font-size: 30px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-style: oblique;
font-weight: 500;
}
.menu{
display: flex;
background-color:blue;
height: 75px;
align-items: center;
flex-wrap: wrap;
}
.box{
background-color: aqua;
height: 50px;
width: 100px;
flex-grow: 1;
margin: 10px;
}
.lower{
margin-top: 50px;
background-color: papayawhip;
height: 75px;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
.container>* {
flex: 0 0 0px;
}
.text{
text-align: center;
font-size: 40px;
padding-top: 25px;
}
.hexagon {
display: inline-block;
box-shadow: 10px 10px 5px #000;
width: 100px;
height: 100px;
background: grey;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
transition: .7s;
margin: 5px;
}
.hexagon:hover {
background: red;
transform: rotateY(-180deg);
transition: .5s;
}
.property1{
background: yellow;
transition: 1s;
}
JS
var createdHexs = false;
function createHexs(){
if (!createdHexs){
const container = document.querySelector('.container');
//const hexagonPattern = [1, 2, 3, 4, 5];
// const _default = document.createElement("div");
// _default.classList.add("row");
// const dhexa = document.createElement("div");
// dhexa.classList.add("hexagon");
// _default.appendChild(dhexa);
// console.log(_default);
// var ele = container.getElementsByClassName("row");
// console.log(ele.length);
// for (let e=0; e < ele.length; e++){
// console.log(container.removeChild(ele[e]));
// }
// console.log(ele);
//const numRange = [["1"], ["1", "1"], ["1", "2", "1"], ["1","3","3","1"], ["1","4","6","4","1"]]
const hexagonPattern = [1];
var numRange = Array();
var index = Number(document.getElementById("Text1").value);
if (index == 0 || index > 11){
if (index > 11){
alert("Number entered is out of range and Triangle may appear distorted, size was reset to default!");
}
for (let i=2; i<=5; i++){
hexagonPattern.push(i);
}
numRange = generatePascal(5);
}
else{
for (let i = 2; i <= index; i++){
hexagonPattern.push(i);
}
numRange = generatePascal(index);
}
//console.log(generatePascal(5));
document.getElementById("createhexagons").innerHTML = "Pascal Triangle with 5(n) rows is created";
for (let i = 0; i < hexagonPattern.length; i++) {
const row = document.createElement('div');
row.classList.add('row');
for (let j = 0; j < hexagonPattern[i]; j++) {
const hexagon = document.createElement('div');
hexagon.classList.add('hexagon');
const num = document.createElement('div');
num.classList.add('text');
num.innerHTML = numRange[i][j];
hexagon.appendChild(num);
row.appendChild(hexagon);
}
container.appendChild(row);
}
console.log(container);
createdHexs = true;
}
}
function generatePascal(n){
var arr = [];
var tmp;
for(var i=0;i<n;i++){
arr[i]=[];
for(var j=0; j<=i; j++){
if(j==i){
arr[i].push(1);
}else{
tmp = (!!arr[i-1][j-1]?arr[i-1][j-1]:0)+(!!arr[i-1][j]?arr[i-1][j]:0);
arr[i].push(tmp);
}
}
}
return arr;
}
function property1(){
const container = document.querySelector(".container");
console.log(container);
console.log(container.getElementsByClassName("row")[4].getElementsByClassName('hexagon')[2].classList.add("property1"));
}
1 answers
solution1
0 ACCPTED 2021-10-08 06:58:41
It looks like you're not clearing the container.
Inside createHexs you could do this:
...
document.getElementById("createhexagons").innerHTML = "Pascal Triangle with 5(n) rows is created";
container.innerHTML = '';
for (let i = 0; i < hexagonPattern.length; i++) {
...
I'm not quite sure what you are trying to achieve with the property buttons, but this fixes the double rendering issue.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I use HTML, CSS, or JS to make an element active by default?
How can i make it show the bottom of this element? (HTML, CSS, JS)
How can I replace a CSS border in HTML using Javascript?
How can I make an HTML box slide on hover and reveal the text underneath it using JS or CSS
How I can make custom select box with search bar using html css js
How can I clear the state in React.js?
How can I make a link open in a new window using css?
How can I make pretty scrollbars using HTML/CSS/JScrollPane
HTML/CSS/JS - How can I change text using a setInterval?
Using jquery, how can I clear items from a canvas?
Related Tags