I'm facing an issue where line breaks are not added after HTML elements are inserted via JavaScript upon clicking a button.
For instance, the data from the inputs doesn't get separated even when I click submit multiple times:
https://i.sstatic.net/Za5gv.png
To illustrate, here is the desired outcome: https://i.sstatic.net/IcjYg.png
Below is the function code that executes after the button is pressed:
function addData() {
// saving input values
// displaying calculations and values on screen while also storing them locally
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");
// appending the html nodes to div-result in the DOM for flex display
// saving input values to variables
strategyValue = inputStrategy.value;
sharesValue = inputShares.value;
enterPriceValue = inputEnterPrice.value;
stopLossValue = inputStopLoss.value;
profitPriceValue = inputProfitPrice.value;
stockNameValue = inputStockName.value;
// assigning values to the html nodes
stockStrategy.innerHTML = strategyValue;
stockValue.innerHTML = sharesValue;
stockPrice.innerHTML = enterPriceValue;
stockStopLoss.innerHTML = stopLossValue;
stockProfitPrice.innerHTML = profitPriceValue;
stockName.innerHTML = stockNameValue;
// adding the stockTitle to 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 Code:
.div-result {
display: flex;
justify-content: center;
border: solid 5px blue;
}
.div-result h2{
color: blue;
margin-left: 5%;
}
HTML Code:
<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>
Appreciate any assistance provided.