嘗試在顯示 flex div 中從 javascript 代碼添加 html 個元素后添加換行符

Question

單擊按鈕后從 javascript 添加 HTML 元素后，我試圖換行。

這是問題的一個示例，在我第二次單擊提交按鈕后來自輸入的數據，它只是被放置在同一個位置：

這是我希望發生的事情的圖像

這是點擊按鈕后運行的 function 代碼：

    function addData() {
    // save the values from the inputs
    // display the calculation and the values on the screen and save it as a local storage
    let strategyValue, sharesValue, enterPriceValue, stopLossValue, profitPriceValue, stockNameValue;

    // creating html nodes
    let breakLine = document.createElement("br");
    let stockStrategy = document.createElement("h2");
    let stockValue = document.createElement("h2");
    let stockPrice = document.createElement("h2");
    let stockStopLoss = document.createElement("h2");
    let stockProfitPrice = document.createElement("h2");
    let stockName = document.createElement("h2");


    // trying to append the html nodes inside the div-result in the DOM in order to display flex the html nodes
    
    

    // saveing the values into variblies
    strategyValue = inputStrategy.value;
    sharesValue = inputShares.value;
    enterPriceValue = inputEnterPrice.value;
    stopLossValue = inputStopLoss.value;
    profitPriceValue = inputProfitPrice.value;
    stockNameValue = inputStockName.value;

    // append value to the html node 
    stockStrategy.innerHTML = strategyValue;
    stockValue.innerHTML = sharesValue;
    stockPrice.innerHTML = enterPriceValue;
    stockStopLoss.innerHTML = stopLossValue;
    stockProfitPrice.innerHTML = profitPriceValue;
    stockName.innerHTML = stockNameValue;

    // i want to add the stockTitle append it to the div-result in the html node

    document.body.appendChild(stockName);
    document.body.appendChild(stockStrategy);
    document.body.appendChild(stockValue);
    document.body.appendChild(stockPrice);
    document.body.appendChild(stockStopLoss);
    document.body.appendChild(stockProfitPrice);
    


    divResult.appendChild(stockStrategy);
    divResult.appendChild(stockValue);
    divResult.appendChild(stockPrice);
    divResult.appendChild(stockStopLoss);
    divResult.appendChild(stockProfitPrice);
    divResult.appendChild(stockName);
    
}

這是 CSS 代碼：

    .div-result {
    display: flex;
    justify-content: center;
    border: solid 5px blue;
}

.div-result h2{
    color: blue;
    margin-left: 5%;
}

這是 HTML 代碼：

    <body>
    <div class="title">
        <h1>Power Tracker</h1>
    </div>

    <div class="div-main-inputs">
        <div class="div-inputs">
            <label>Stock Name</label>
            <input value="" type="text" class="input-stock">
            <label>Choice Strategy</label>
            <input value="" type="text" class="input-strategy">
            
            
        </div>

        <div class="div-secondInputs">
            <label>Bought Price</label>
            <input value="" type="number" class="input-enter">
            <label>Stop Loss Price</label>
            <input value="" type="number" class="input-stop-loss">
            <label>Profit Price</label>
            <input value="" type="number" class="input-profit-price">
            <label>Choice Shares</label>
            <input value="" type="number" class="input-shares">
        </div>

        <button class="btn-submit">Submit</button>

    </div>
    <div class="div-result">


    </div>


    <script src="script.js"></script>
</body>

感謝幫手。

Answer 1

有很多你似乎不明白。 如果您對答案有具體問題，請詢問他們。 但首先要查看解決方案。

 function addData() { // save the values from the inputs // display the calculation and the values on the screen and save it as a local storage let strategyValue, sharesValue, enterPriceValue, stopLossValue, profitPriceValue, stockNameValue; // creating html nodes let breakLine = document.createElement("br"); let stockStrategy = document.createElement("h2"); let stockValue = document.createElement("h2"); let stockPrice = document.createElement("h2"); let stockStopLoss = document.createElement("h2"); let stockProfitPrice = document.createElement("h2"); let stockName = document.createElement("h2"); // trying to append the html nodes inside the div-result in the DOM in order to display flex the html nodes // saveing the values into variblies strategyValue = document.getElementById('strategy').value; sharesValue = document.getElementById('strategy').value; enterPriceValue = document.getElementById('strategy').value; stopLossValue = document.getElementById('strategy').value; profitPriceValue = document.getElementById('strategy').value; stockNameValue = document.getElementById('strategy').value; // append value to the html node stockStrategy.innerHTML = strategyValue; stockValue.innerHTML = sharesValue; stockPrice.innerHTML = enterPriceValue; stockStopLoss.innerHTML = stopLossValue; stockProfitPrice.innerHTML = profitPriceValue; stockName.innerHTML = stockNameValue; // i want to add the stockTitle append it to the div-result in the html node divResult = document.getElementById('divResult'); let div = document.createElement("div"); div.className='div-result' div.appendChild(stockName); div.appendChild(stockStrategy); div.appendChild(stockValue); div.appendChild(stockPrice); div.appendChild(stockStopLoss); div.appendChild(stockProfitPrice); div.appendChild(breakLine); divResult.append(div) }

 .div-result { display: flex; justify-content: center; ; }.div-result h2{ color: blue; margin-left: 5%; }.div-result0{ border:solid 3px blue;}

 <body> <div class="title"> <h1>Power Tracker</h1> </div> <div class="div-main-inputs"> <div class="div-inputs"> <label>Stock Name</label> <input value="" type="text" class="input-stock" id='stockName'> <label>Choice Strategy</label> <input value="" type="text" class="input-strategy" id = 'strategy'> </div> <div class="div-secondInputs"> <label>Bought Price</label> <input value="" type="number" class="input-enter" id = 'enterPrice'> <label>Stop Loss Price</label> <input value="" type="number" class="input-stop-loss" id='stopLoss'> <label>Profit Price</label> <input value="" type="number" class="input-profit-price" id = 'profitPrice'> <label>Choice Shares</label> <input value="" type="number" class="input-shares" id='inputShares'> </div> <button class="btn-submit" onclick="addData()" >Submit</button> </div> <div class="div-result0" id='divResult'> </div> <script src="script.js"></script> </body>

嘗試在顯示 flex div 中從 javascript 代碼添加 html 個元素后添加換行符

問題描述

1 個解決方案

解決方案1
1 已采納 2022-12-11 20:16:33

嘗試在顯示 flex div 中從 javascript 代碼添加 html 個元素后添加換行符

問題描述

1 個解決方案

解決方案1 1 已采納 2022-12-11 20:16:33

解決方案1
1 已采納 2022-12-11 20:16:33