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

时间：2019-05-15 01:31:29

标签： javascript html dom javascript-objects dom-events

我花了整整一整天（36小时）的时间来解决将html表单与Javascript代码连接起来的问题，但直到现在仍无法正常工作。...

现在，我尝试修复然后在html表单上工作的内容是button和段落（结果），但是有两个输入仍然无效。请为我检查我的代码，看看是否可以帮助我解决此问题。

我在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>

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

现在我的按钮和用于显示结果的段落都可以正常工作，但是这两个输入在UI上不起作用。

  

秤包含两个元素，第一个是上的两个正整数权重   一个天平（左侧和右侧），第二个元素是   可用权重为正整数。您的目标是确定您是否可以   通过使用列表中最少的权重来平衡秤，但使用   最多只有2个重量

     

任务例如：
  如果小数位数为[“ [5，9]”，“ [1,2,6，7]”]，则表示存在余额   秤的左侧为5，右侧为9。实际上，   可以通过在权重列表的左侧添加6来平衡此比例   并在右侧添加2。这两个音阶现在等于11，分别是   完美平衡。您的程序应返回以逗号分隔的字符串   清单中使用的权重按升序排列，因此对于此示例，您的   程序应返回字符串2,6。

     

条件

     
      
  • 秤的第一个元素只能包含2个权重
    •   
  • 可以在秤的一侧添加两个砝码以使其平衡
    •   
  • 如果无法平衡秤，则您的程序应返回   “规模失衡”
    •   
     

UI设计：

     
      
  • 2个输入值来获取刻度的2个元素
    •   
  • 用于计算所需平衡重量的按钮
    •   
  • 显示结果的div
    •   

1 个答案:

答案 0 :(得分：0)

首先，您没有任何表单元素。

使用表单时第二，提交时将重新加载页面，因此您必须使用按钮来代替或禁用默认行为，即谁要发送页面并将页面重新加载到动作属性值。

第二个是正确的（但并不是真的，因为输入字段元素打算包装在表单元素中），但是您定义了一个常量作为从事件中检索的值，因此将在页面加载时而不是在您加载页面时加载它需要它（事件弹出时）。 没有必要使用常量，并且在需要时必须获取该值，因此，当input填充时，即表示

中第二个参数使用的函数

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

在创建页面时将其定义为常量，这意味着该值将为空（或默认为，但似乎没有值）并且永远相同。因此，在需要使用常量时不要使用它来获取值。

当用户使用正确的值填充输入时。 另一个困扰我的缺陷是，您将输入的id命名为list，或者它们的含义是唯一的……这不适合编写清晰清晰的脚本。

更重要的是，我认为重量和其他输入是数字值，但是您将输入写为文本。 JS中仍然没有可以使用的键入值，但不会阻止用户在输入中写入文本，任何数字都将被视为字符串。

您可以通过使用HTML5属性type ='number'甚至是最大和最小必需值来轻松更改此设置，如果值在错误范围内，它们将阻止实际形式的输入。 意味着您可以轻松地将输入值设置为不匹配的值，并且该程序将无法工作或显示愚蠢的答案，例如将体重（如果是人类）设置为可能的体重以上。

当然，还需要检查计算函数中的值以作为测试，如果！= isNaN（valueToCheck）确保使用数字而不是不适当的值（例如字符串）。 这是对不具有强类型值的语言的破坏，希望它具有诸如使用数据的灵活方式的优点，但是在使用它们时需要检查它们，以确保使用错误的数据类型和不相关的数据来代替匹配的。

相关问题
最新问题