[英]Dom Javascript how can I connect my html form with my Javascript code
我花了一整天半（36個小時）與我的html表單連接我的Javascript代碼的問題，但到現在為止它沒有工作....
現在我嘗試修復然后處理html表單的東西是按鈕和段落（結果）但有兩個輸入仍然不起作用。 請檢查我的代碼，看看你是否可以幫我解決這個問題。
我的項目鏈接在codepen.io上
https://codepen.io/key-joshua/pen/XQGJdz
<!DOCTYPE html>
<html>
<body>
<div class="header">
<h1>Scale Balancing</h1>
</div>
<div class="input-groups">
<div class="input-group">
<label>Weights</label>
<!-- <br> -->
<input type="text" name="weight" id="weights" />
<!-- <br><br> -->
<label>Weights_Lists</label>
<!-- <br> -->
<input type="text" name="weights_list" id="weights_lists" />
<!-- <br><br> -->
<button id="balance" class="btns">Balance</button>
<br><br><br><br>
<p id="results" >Results....</p>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
*
{
margin: 0px;
padding: 0px;
}
.header{
width: 30%;
margin: 50px auto 0px;
color: white;
background: #423107;
text-align: center;
border: 1px solid #B0C4DE;
border-bottom: none;;
border-radius: 10px 10px 0px 0px;
padding: 20px;
}
form{
width: 20.5%;
margin: 0px auto;
padding: 20px;
border: 1px solid #B0C4DE;
border-radius: 0px 0px 10px 10px;
}
.input-group{
margin: 15px 0px 15px 0px;
}
.input-groups{
width: 29.5%;
margin: 0px auto;
padding: 20px;
border: 1px solid #B0C4DE;
border-radius: 0px 0px 10px 10px;
}
.input-group label{
color: #423107;
display: block;
text-align: left;
margin: 3px;
}
.input-group input{
height: 30px;
width: 93%;
padding: 5px 14px;
font-size: 16px;
border-radius: 5px;
border: 1px solid gray;
}
.btns{
float: left;
padding: 10px;
font-size: 15px;
color: white;
background: #4c390c;
/*border: none;*/
border-radius: 5px;
}
<script type="text/javascript">
const btn= document.getElementById("balance");
const message = document.getElementById("results");
// let weights = [2,5];
//let weights = document.getElementById('weights').value.split(',');
let weights = document.getElementById("weights").value = [2,3];
const right = weights[0];
const left = weights[1];
// var weights_list = [1,3,2,40,7];
//let weights_list = document.getElementById('weights_list').value.split(',');
let weights_list = document.getElementById('weights_lists').value= [1,3,2,40,7];
function ScaleBalancing() {
for (x = 0; x <weights_list.length; x++ )
{
if ( right == left )
{
message.innerHTML=" Already This Scale Balanced ";
}
else if ( right+weights_list[x]===left
||
right===left+weights_list[x])
{
message.innerHTML=' You Will Use ' + '' + weights_list[x] +' To Balance This Scale ';
}
for ( y=x+1; y<weights_list.length; y++)
{
if
(
right+weights_list[x]+weights_list[y] === left
||
left + weights_list[x] + weights_list[y] === right
||
right +weights_list [x] === left +weights_list [y]
||
left + weights_list[x] === right + weights_list[y]
)
{
message.innerHTML= ' You Use ' +'' + weights_list[x] + ',' + weights_list[y]+' To Balance This Scale ';
}
}
}
return'Scale Imbalanced !! There is no Weights into weights _list To Balance This Scale ';
}
btn.addEventListener('click', function(){
console.log(ScaleBalancing());
})
</script>
//all those codes together
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
.header{
width: 30%;
margin: 50px auto 0px;
color: white;
background: #423107;
text-align: center;
border: 1px solid #B0C4DE;
border-bottom: none;;
border-radius: 10px 10px 0px 0px;
padding: 20px;
}
form{
width: 20.5%;
margin: 0px auto;
padding: 20px;
border: 1px solid #B0C4DE;
border-radius: 0px 0px 10px 10px;
}
.input-group{
margin: 15px 0px 15px 0px;
}
.input-groups{
width: 29.5%;
margin: 0px auto;
padding: 20px;
border: 1px solid #B0C4DE;
border-radius: 0px 0px 10px 10px;
}
.input-group label{
color: #423107;
display: block;
text-align: left;
margin: 3px;
}
.input-group input{
height: 30px;
width: 93%;
padding: 5px 14px;
font-size: 16px;
border-radius: 5px;
border: 1px solid gray;
}
.btns{
float: left;
padding: 10px;
font-size: 15px;
color: white;
background: #4c390c;
/*border: none;*/
border-radius: 5px;
}
</style>
</head>
<body>
<div class="header">
<h1>Scale Balancing</h1>
</div>
<div class="input-groups">
<div class="input-group">
<label>Weights</label>
<!-- <br> -->
<input type="text" name="weight" id="weights" />
<!-- <br><br> -->
<label>Weights_Lists</label>
<!-- <br> -->
<input type="text" name="weights_list" id="weights_lists" />
<!-- <br><br> -->
<button id="balance" class="btns">Balance</button>
<br><br><br><br>
<p id="results" >Results....</p>
</div><br>
© Joshua
</div>
<script type="text/javascript">
const btn= document.getElementById("balance");
const message = document.getElementById("results");
// let weights = [2,5];
//let weights = document.getElementById('weights').value.split(',');
let weights = document.getElementById("weights").value = [2,3];
const right = weights[0];
const left = weights[1];
// var weights_list = [1,3,2,40,7];
//let weights_list = document.getElementById('weights_list').value.split(',');
let weights_list = document.getElementById('weights_lists').value= [1,3,2,40,7];
function ScaleBalancing() {
for (x = 0; x <weights_list.length; x++ )
{
if ( right == left )
{
message.innerHTML=" Already This Scale Balanced ";
}
else if ( right+weights_list[x]===left
||
right===left+weights_list[x])
{
message.innerHTML=' You Will Use ' + '' + weights_list[x] +' To Balance This Scale ';
}
for ( y=x+1; y<weights_list.length; y++)
{
if
(
right+weights_list[x]+weights_list[y] === left
||
left + weights_list[x] + weights_list[y] === right
||
right +weights_list [x] === left +weights_list [y]
||
left + weights_list[x] === right + weights_list[y]
)
{
message.innerHTML= ' You Use ' +'' + weights_list[x] + ',' + weights_list[y]+' To Balance This Scale ';
}
}
}
return'Scale Imbalanced !! There is no Weights into weights _list To Balance This Scale ';
}
btn.addEventListener('click', function(){
console.log(ScaleBalancing());
})
</script>
</body>
</html>
現在我的按鈕和顯示結果的段落工作正常，但這兩個輸入在UI上不起作用。
Scale包含兩個元素，第一個是平衡刻度上的兩個正整數權重（左側和右側），第二個元素是可用權重列表作為正整數。 您的目標是確定是否可以使用列表中最少的權重來平衡比例，但最多只使用2個權重
任務例如：
如果比例為[“[5,9]”，“[1,2,6,7]”，那么這意味着存在左側重量為5而右側為9的平衡標度。 實際上，可以通過在權重列表的左側添加6並在右側添加2來平衡此比例。 兩個尺度現在都等於11，它們完全平衡。 您的程序應該以升序返回從列表中使用的逗號分隔的權重字符串，因此對於此示例，您的程序應返回字符串2,6。條件
- 比例的第一個元素只能包含2個權重
- 可以僅在秤的一側添加兩個砝碼以平衡它
- 如果無法平衡比例，則程序應返回“Scale Imbalanced”
UI設計：
- 2個輸入取得Scale的2個元素
- 用於計算所需重量以平衡的按鈕
- 顯示結果的div
首先，你沒有任何表格元素。
第二次使用表單時，您將在提交時重新加載頁面，這樣您就可以使用按鈕來代替或禁用默認行為，以便將頁面發送並重新加載到操作屬性值。
第二個是正確的（但不是因為輸入字段元素意味着包裝在表單元素中），但是您將一個常量定義為從事件中檢索的值，因此它將在頁面加載時加載而不是在您需要時加載（當彈出事件時）。 沒有理由使用常量，你需要在需要時獲取值，所以當輸入填充時，意味着在第二個參數中使用的函數
.addEventListener( 'click' , function(){/*there you go grab data if fields are corectly filled*/
在頁面創建的常量設置中定義它意味着該值將為空（或默認但似乎沒有一些）並且永遠是相同的。 因此，當需要時，不要使用常量並獲取值：
當用戶使用正確的值填充輸入時。 另一個打擾我的瑕疵就是你將輸入的名稱命名為列表，或者它們意味着一個獨特的價值......這不適合重新編寫一個清晰且難以理解的腳本。
更重要的是我認為權重和其他輸入是數字值，但您將輸入寫為文本。 JS中仍然沒有可以使用的類型值，但不會阻止用戶在輸入中寫入文本，任何數字都將被視為字符串。
您可以通過使用HTML5屬性type ='number'，甚至max和min所需的值來輕松更改此值，如果值在錯誤的范圍內，他們將阻止實際表單輸入。 這意味着您的輸入值可以輕松設置為不匹配值，程序將無法工作或顯示愚蠢的答案，例如通過設置超過可能重量的權重（如果是人）。
當然，還需要檢查計算函數中的值作為測試，如果！= isNaN（valueToCheck）以確保使用數字而不是不足的值，例如字符串。 這是一種沒有強類型值的語言的缺點，希望在這方面也有一種優勢，就像使用數據的靈活方式，但在使用數據時需要檢查它們以確保使用錯誤的數據類型和不相關的數據而不是匹配的。
如何將我的 html 代碼連接到 javascript 中的控制器和路由？
[英]How do I connect my html code to controllers and routes in javascript?
如何將我的 HTML 文本框輸入連接到我的 Javascript 過濾器 POST 代碼？
[英]How do I connect my HTML textbox input to my Javascript filter POST code?
如何將HTML表單提交與JavaScript表單更新分開？
[英]How can I separate my HTML form submit from my JavaScript form update?
如何運行此javascript代碼以驗證html文檔中的表單？
[英]How do I run this javascript code to validate my form in my html doc?
如何提取javascript生成的DOM對象的html代碼？
[英]How can I extract the html code for a DOM object generated by javascript?
在UpdatePanel完成加載DOM元素后，如何從代碼隱藏中執行JavaScript？
[英]How can I execute JavaScript from my code-behind after my UpdatePanel has finished loading its DOM elements?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.