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

【问题标题】：Dom Javascript how can I connect my html form with my Javascript codeDom Javascript 如何将我的 html 表单与我的 Javascript 代码连接起来
【发布时间】：2019-10-02 02:03:09
【问题描述】：

我花了整整一天半（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>

  &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 上不起作用。

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

任务举例：
如果比例是 ["[5, 9]", "[1, 2, 6, 7]"] 那么这意味着有一个平衡 秤左侧5，右侧9。事实上，它是 可以通过在权重列表的左侧添加 6 来平衡这个比例 并在右侧添加 2。两个比例现在都等于 11，它们是 完美平衡。你的程序应该返回一个逗号分隔的字符串 以升序从列表中使用的权重，因此对于此示例，您的 程序应该返回字符串 2,6。

条件

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

界面设计：

  • 2 个输入以获取 Scale 的 2 个元素
  • 计算平衡所需重量的按钮
  • 显示结果的 div

【问题讨论】：

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


    【解决方案1】：

    首先你没有任何表单元素。

    第二次使用表单时，您将在提交时重新加载页面，因此您必须使用按钮而不是或禁用默认行为谁将发送和重新加载页面到操作属性值。

    第二个是正确的（但不是真的，因为输入字段元素意味着要包装在表单元素中）但是您将常量定义为从事件中检索的值，因此它将在页面加载时加载，而不是在您加载时加载需要它（当事件弹出时）。 没有理由使用常量，你必须在需要时获取值，所以当输入被填充时，意味着在

    中的第二个参数处使用的函数

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

    在页面创建时将其定义为一个常量集意味着该值将为空（或默认值，但似乎没有一些）并且永远相同。所以不要使用常量并在需要时获取值：

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

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

    您可以通过使用 HTML5 属性 type='number' 甚至 max 和 min 来轻松更改此值，如果值在错误范围内，它们将阻止真实的表单输入。 这意味着您的输入值可以很容易地设置为不匹配的值，并且程序将无法运行或将显示愚蠢的答案，例如通过将权重（如果是人类）设置为高于可能的权重。

    当然，它还需要检查计算函数中的值作为测试 if != isNaN(valueToCheck) 以确保使用数字而不是字符串等不合适的值。 这是一种没有强类型值的语言的缺点，希望这也有一些优点，例如使用数据的灵活方式，但在使用它们时需要检查它们以确保使用错误的数据类型和不相关的数据而不是匹配的。

    【讨论】：

    • 你好 Jean，你能帮我动态获取这两个输入吗...你看到我将所有代码块一起添加，你可以花 45 分钟来修复这个面试挑战代码，因为此时我失败了，但是你上面提到的那个方法我想我以前试过了
    • 不是！它是为那些自己做的人提供帮助和建议的。如果您想雇用某人，您可以解决很多专业问题...您的问题是关于基本的Javascript，例如进行数学运算。为了使用 Javascript，您必须对 HTML 有很好的了解，并且需要了解 Javascript。您会发现大量的 JavaScript 课程和实际示例可以部分或全部完成您想要的操作。我所有的建议都是关于你所做的错误和误解。顺便试一下……如果你自己没有成功（我不明白你为什么这样做）发布你的新代码以获得新的答案。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-10-10
    • 2015-06-26
    • 2014-10-30
    • 2021-07-31
    • 2013-08-27
    • 1970-01-01
    • 2019-08-28
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode