堆棧內存溢出
  簡體   English   中英

如何創建默認狀態/清除容器並使用 HTML/CSS/JS 替換為新項目

[英]How can I make a default state/Clear the container and replace with new items using HTML/CSS/JS

 原文  2021-10-08 06:24:40  0   1    javascript/ html/ css/ frontend

問題描述

你好，我想做一些非常具體的事情，我已經搜索了 stackoverflow，但我無法弄清楚或找到它。 如下圖所示，我想用用戶要求的新內容替換當前容器內容，但它附加在當前內容（我不想要）下面，我已經嘗試過 remove()、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 個解決方案

解決方案1
 0 已采納  2021-10-08 06:58:41

看起來你沒有清理容器。

在 createHexs 中你可以這樣做：

    ...
    document.getElementById("createhexagons").innerHTML = "Pascal Triangle with 5(n) rows is created";
    container.innerHTML = '';
    for (let i = 0; i < hexagonPattern.length; i++) {
    ...

我不太確定你想用屬性按鈕實現什么，但這解決了雙重渲染問題。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使用 HTML、CSS 或 JS 使元素默認處於活動狀態？ 我怎樣才能讓它顯示這個元素的底部？ (HTML, CSS, JS) 如何使用Javascript替換HTML中的CSS邊框？ 如何在懸停時制作HTML框，並使用JS或CSS顯示其下方的文本 我如何使用 html css js 制作帶有搜索欄的自定義 select 框 如何清除React.js中的狀態？ 如何使用CSS在新窗口中打開鏈接？ 如何使用HTML / CSS / JScrollPane制作漂亮的滾動條 HTML / CSS / JS - 如何使用setInterval更改文本？ 使用jQuery，如何清除畫布上的項目？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM