Dom Javascript如何将我的html表单与我的Javascript代码连接起来

Question

I spent whole day and half (36 hours) fighting with this issues of connecting my html form with my Javascript codes but till now it is not working.... 我花了一整天半（36个小时）与我的html表单连接我的Javascript代码的问题，但到现在为止它没有工作....

Right now the stuff I tried to fix then working on html form are button and paragraph (results) but there are two inputs which are remain non-working. 现在我尝试修复然后处理html表单的东西是按钮和段落（结果）但有两个输入仍然不起作用。 Please check for me my code to see if you could help me to fix this issue. 请检查我的代码，看看你是否可以帮我解决这个问题。

My project link on codepen.io 我的项目链接在codepen.io上

https://codepen.io/key-joshua/pen/XQGJdz 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>

  &copy 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>

Now my button and paragraph for displaying result are working fine but those two inputs are not working on UI. 现在我的按钮和显示结果的段落工作正常，但这两个输入在UI上不起作用。

A Scale contains two elements, the first being the two positive integer weights on a balance scale (left and right sides) and the second element being a list of available weights as positive integers. Scale包含两个元素，第一个是平衡刻度上的两个正整数权重（左侧和右侧），第二个元素是可用权重列表作为正整数。 Your goal is to determine if you can balance the scale by using the least amount of weights from the list, but using at most only 2 weights 您的目标是确定是否可以使用列表中最少的权重来平衡比例，但最多只使用2个权重

Task For example: 任务例如：
if a scale is ["[5, 9]", "[1, 2, 6, 7]"] then this means there is a balance scale with a weight of 5 on the left side and 9 on the right side. 如果比例为[“[5,9]”，“[1,2,6,7]”，那么这意味着存在左侧重量为5而右侧为9的平衡标度。 It is, in fact, possible to balance this scale by adding a 6 to the left side from the list of weights and adding a 2 to the right side. 实际上，可以通过在权重列表的左侧添加6并在右侧添加2来平衡此比例。 Both scales will now equal 11 and they are perfectly balanced. 两个尺度现在都等于11，它们完全平衡。 Your program should return a comma separated string of the weights that were used from the list in ascending order, so for this example, your program should return the string 2,6. 您的程序应该以升序返回从列表中使用的逗号分隔的权重字符串，因此对于此示例，您的程序应返回字符串2,6。

Conditions 条件

The first element of the scale can only contain 2 weights 比例的第一个元素只能包含2个权重

It is possible to add two weights to only one side of the scale to balance it 可以仅在秤的一侧添加两个砝码以平衡它

If it is not possible to balance the scale then your program should return “Scale Imbalanced” 如果无法平衡比例，则程序应返回“Scale Imbalanced”

UI Design: UI设计：

2 inputs to take the 2 elements of the Scale 2个输入取得Scale的2个元素

A button to calculate the needed weight to balance 用于计算所需重量以平衡的按钮

A div to display the result 显示结果的div

Answer 1

1st of all you don't have any form element. 首先，你没有任何表格元素。

2nd when using a form you'll reload page when submit so you've to use a button instead an or disable default behavior who's to send and reload page to action attribute value. 第二次使用表单时，您将在提交时重新加载页面，这样您就可以使用按钮来代替或禁用默认行为，以便将页面发送并重新加载到操作属性值。

The 2nd is correct(but not really because input field elements meant to be wrapped in a form element) but you define a constant as the value you retrieve out of event so it'll be loaded when page load and not when you need it(when the event is popped). 第二个是正确的（但不是因为输入字段元素意味着包装在表单元素中），但是您将一个常量定义为从事件中检索的值，因此它将在页面加载时加载而不是在您需要时加载（当弹出事件时）。 There's no reason to use constant and you've to get the value when you need it, so when input is filled , meaning in the function used at 2nd parameter in the 没有理由使用常量，你需要在需要时获取值，所以当输入填充时，意味着在第二个参数中使用的函数

.addEventListener( 'click' , function(){/*there you go grab data if fields are corectly filled*/

Define it at a constant set at page creation mean the value will be empty(or default but it seems there is none some) and ever be the same. 在页面创建的常量设置中定义它意味着该值将为空（或默认但似乎没有一些）并且永远是相同的。 So don't use constant and get value when it'll needed to be: 因此，当需要时，不要使用常量并获取值：

when user has filled inputs with correct values. 当用户使用正确的值填充输入时。 Another flaw who disturb me is you name id of input as list or they're meant to an unique value...that's not fit to reccomandation of writing a clear and understanble script. 另一个打扰我的瑕疵就是你将输入的名称命名为列表，或者它们意味着一个独特的价值......这不适合重新编写一个清晰且难以理解的脚本。

More important i thought weight and other input are numerics values but you write input as text. 更重要的是我认为权重和其他输入是数字值，但您将输入写为文本。 Still there's not typed value in JS that could be used anyway but won't prevent user to write a text in the input and any numeric will be treated as string. JS中仍然没有可以使用的类型值，但不会阻止用户在输入中写入文本，任何数字都将被视为字符串。

You can easily change this by using HTML5 attribute type='number' and even max and min required values who'll block a real form input if values are in wrong range. 您可以通过使用HTML5属性type ='number'，甚至max和min所需的值来轻松更改此值，如果值在错误的范围内，他们将阻止实际表单输入。 Meaning your inputs values can easily set to not matching values and the program won't work or will display stupid answers, as by setting a weight(if that an human) above a possible weight. 这意味着您的输入值可以轻松设置为不匹配值，程序将无法工作或显示愚蠢的答案，例如通过设置超过可能重量的权重（如果是人）。

Surely it need also to check values in the calculate function as a test if != isNaN(valueToCheck) to ensure that numbers are used and not ineadaquate values such a string. 当然，还需要检查计算函数中的值作为测试，如果！= isNaN（valueToCheck）以确保使用数字而不是不足的值，例如字符串。 That's a disavantage of a language who has not strong typed values, hopefully there's also avantages in this like a flexible way to use data but will need checking them when using them to be sure that wrong data type and non-relevant data are used instead of matching ones. 这是一种没有强类型值的语言的缺点，希望在这方面也有一种优势，就像使用数据的灵活方式，但在使用数据时需要检查它们以确保使用错误的数据类型和不相关的数据而不是匹配的。

Dom Javascript如何将我的html表单与我的Javascript代码连接起来

问题描述

1 个解决方案

解决方案1
0 2019-05-15 03:26:16

Dom Javascript如何将我的html表单与我的Javascript代码连接起来

问题描述

1 个解决方案

解决方案1 0 2019-05-15 03:26:16

解决方案1
0 2019-05-15 03:26:16