根據用戶輸入的數字/javascript創建一個新的div-有解無憂

所以基本上我有 2 個輸入，第一個輸入一個數字，第二個輸入一個字串，所以當用戶提交時，結果將是一個新的 div 創建，它們將包括用戶給出的字串，以及他們的數字也將是用戶給出的數字。

uj5u.com熱心網友回復：

更新：我對代碼進行了一些更改，因此，如您所見，此代碼使用實際<input>標簽。

您可以單擊按鈕、添加 div 或洗掉它們，也可以使用 Enter 鍵。一些造型使它更“引人注目”。

這段代碼可以除錯嗎？當然！但我認為根據您的問題，這更符合其目的。

希望這可以幫助！

let number = document.getElementById("number")
, sentence = document.getElementById("sentence")

//RANDOM COLOR OF STABLISHED PALETTE GENERATOR
, randomColor = function(min, max) {
    let colors = {pink: "#ff99c8", yellow: "#fcf6bd"
    , green: "#d0f4de", blue: "#a9def9", violet: "#e4c1f9"}
    , palette = ["pink", "yellow", "green", "blue", "violet"]
    , colorSelector = Math.floor(Math.random() * (max - min   1)   min);
    return colors[palette[colorSelector]];
};
//FUNCTION TO CREATE DIVS
function createDivs() {
    for(let i = 1; i <= Number(number.value); i  ){
        let div = document.createElement("div");
        div.className = "styled";
        div.style.backgroundColor = randomColor(0,4);
        div.appendChild(document.createTextNode(`${i}. ${sentence.value}`));
        document.body.appendChild(div);
    };
}
/* CREATE DIVS TRIGGERED BY CLICKING ON
OR PRESSING DOWN AN ENTER KEY THE INPUT FIELD OF NUMBER */
let add = document.querySelector("form");
add.addEventListener("submit", function(e){
    e.preventDefault();
    createDivs();
});
// FUNCTION TO REMOVE EACH DIV FOR CLEAR BUTTON
function removeDivs() {
let divs = document.querySelectorAll("div.styled")
for(eachDiv of divs) {
    eachDiv.parentNode.removeChild(eachDiv);
    }
};

// REMOVE DIVS TRIGGERED BY A CLICK ON CLEAR BUTTON
let clearBtn = document.getElementById("clearBtn");
clearBtn.removeEventListener("submit", createDivs())
clearBtn.addEventListener("click", function(e){
    e.preventDefault();
    removeDivs()
});

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@700&display=swap');

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: rgb(216, 217, 255);
    display: inline-block;
    padding-top: 15px;
    padding-left: 15px;
}

.font {
    font-family: 'Quicksand', sans-serif;
}

.px18 {
    font-size: 18px;
}

.color {
    color: rgb(64, 63, 100);
}

.gray {
    color:rgb(151, 151, 151);
}

form {
    float:left;
    display: flex;
    flex-direction: column;
    width: fit-content;
    margin: 0px 10px 0px 0px;
}

label {
    margin-bottom: 15px;
}

#labeltwo {
    margin-top: 25px;
}

input {
    border-radius: 5px;
    border: 2px rgb(64, 63, 100) solid;
    padding: 5px;
    
}

button {
    max-width: fit-content;
    padding: 2px 15px;
    margin-top: 25px;
    border: 2px rgb(64, 63, 100) solid;
    border-radius: 5px;
    background-color: aquamarine;
}

#buttons {
    display: flex;
    align-items: center;
    justify-content:space-between ;
    border: none;
}

.styled {
    display: inline-block;
    padding: 5px 15px;
    margin: 5px 5px 5px 0px;
    border-radius: 10px;
    border: 2px rgb(64, 63, 100) solid;
    font-size: 1em;
}

*:focus {
    outline: 3px aquamarine solid;
}

<body action="" class="font color">
    <form method="get" id="form" class="px18">
        <label id="labelone" for="number">How many divs you want?</label>
        <input id="number" type="text" placeholder="15" class="px18 font gray"/>
        <label id="labeltwo" for="text">Which content you want in them?</label>
        <input id="sentence" type="text" placeholder="love" class="px18 font gray"/>
        <div id="buttons">
            <button id="addBtn" class="px18 font color">add</button>
            <button id="clearBtn" class="px18 font color">clear</button>
        </div>
    </form>
</body>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/510253.html

標籤：javascriptdomdom 事件提交

上一篇：如何將活動課程保存到本地存盤

下一篇：如何在節點和快遞中發送firebase主題通知？