[英]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.