[英]Trying to add a line break after html elements getting add from javascript code inside a display flex div
I'm trying to have a line break after HTML elements get added from a javascript after clicking a button.单击按钮后从 javascript 添加 HTML 元素后,我试图换行。
Here is an example of the issue, the data from the inputs after I click a second time on the submit button, it's just getting placed in the same spot:这是问题的一个示例,在我第二次单击提交按钮后来自输入的数据,它只是被放置在同一个位置:
Here is an image of what I wish to happen这是我希望发生的事情的图像
Here is the function code that running after button is clicked:这是点击按钮后运行的 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);
}
Here is the CSS Code:这是 CSS 代码:
.div-result {
display: flex;
justify-content: center;
border: solid 5px blue;
}
.div-result h2{
color: blue;
margin-left: 5%;
}
Here is the HTML Code:这是 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>
Thanks for the Helpers.感谢帮手。
there's a lot you seem to not understand.有很多你似乎不明白。 If you have specific questions about the answer please ask them.
如果您对答案有具体问题,请询问他们。 But first review the solution.
但首先要查看解决方案。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.