#javascript #html #css #frontend
Вопрос:
Здравствуйте, я хочу сделать что-то очень конкретное, и я просмотрел stackoverflow, но я не могу понять или найти его. Как видно из приведенного ниже, я хочу заменить текущее содержимое контейнера новым контентом, запрошенным пользователем, но он добавляется ниже текущего(чего я не хочу), и я попытался удалить (), removechild() ничего не помогает. Также после каждого нажатия кнопки для каждого свойства я хочу, чтобы треугольник возвращался в состояние по умолчанию(без анимации). Итак, существует ли временный способ добавления классов или анимаций с помощью javascript. Это ожидается, когда я нажму «Создать», и это то, что я получаю.
Вот код:
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. CSS и JS-это одно и то же
2. Ваш JS похож на CSS, это новый способ написания JS, которого мы не знаем? -:)
3. Извините, ребята, просто неправильная вставка :), Исправил
Ответ №1:
Похоже, вы не очищаете контейнер.
Внутри createHexs вы могли бы сделать это:
...
document.getElementById("createhexagons").innerHTML = "Pascal Triangle with 5(n) rows is created";
container.innerHTML = '';
for (let i = 0; i < hexagonPattern.length; i ) {
...
Я не совсем уверен, чего вы пытаетесь достичь с помощью кнопок свойств, но это устраняет проблему двойного рендеринга.
Комментарии:
1. О, чувак, это было так просто, я чувствую себя таким глупым, клянусь. Спасибо, чувак. Кроме того, я думаю, что это также решит мой вопрос о свойствах.