Dom Javascript, как я могу связать мою HTML-форму с моим кодом Javascript - PullRequest
Новая
       44

Dom Javascript, как я могу связать мою HTML-форму с моим кодом Javascript

0 голосов
/ 15 мая 2019

Я потратил целый день (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>

Теперь моя кнопка и параграф для отображения результата работаютхорошо, но эти два входа не работают в пользовательском интерфейсе.

Шкала содержит два элемента, первый из которых представляет собой два целых положительных веса на шкале баланса (слева и справа), а второй элемент представляет собойсписок доступных весов в виде натуральных чисел.Ваша цель - определить, можете ли вы уравновесить весы, используя наименьшее количество весов из списка, но используя не более 2 весов

Задача Например:
, если шкала равна ["[5, 9] "," [1, 2, 6, 7] "], то это означает, что есть весы с весом 5 с левой стороны и 9 с правой стороны.Фактически, возможно сбалансировать эту шкалу, добавив 6 к левой стороне от списка весов и добавив 2 к правой стороне.Обе шкалы теперь будут равны 11, и они идеально сбалансированы.Ваша программа должна возвращать разделенную запятыми строку весов, которые использовались из списка в порядке возрастания, поэтому в этом примере ваша программа должна вернуть строку 2,6.

Условия

  • Первый элемент шкалы может содержать только 2 веса
  • Можно добавить два веса только к одной стороне шкалы, чтобы сбалансировать ее
  • Если невозможно сбалансироватьмасштабировать, то ваша программа должна вернуть «Scale Imbalanced»

UI Design:

  • 2 входа, чтобы взять 2 элемента Scale
  • кнопку длярассчитать необходимый вес для баланса
  • деление для отображения результата

1 Ответ

0 голосов
/ 15 мая 2019

1-й из всех, у вас нет элемента формы.

2-й, при использовании формы вы перезагрузите страницу при отправке, так что вам нужно вместо этого использовать кнопку или отключить поведение по умолчанию для отправкии перезагрузите страницу к значению атрибута действия.

2-й верен (но не совсем, потому что элементы поля ввода должны быть обернуты в элемент формы), но вы определяете константу как значение, которое вы извлекаете из события, поэтомуБудет загружаться при загрузке страницы, а не когда вам это нужно (когда событие всплывет).Нет смысла использовать константу, и вы должны получить значение, когда вам это нужно, поэтому, когда ввод заполнен, то есть в функции, используемой для второго параметра в

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

Определите его при постоянном значении при создании страницы. Это означает, что значение будет пустым (или значением по умолчанию, но, похоже, его нет) и будет всегда одинаковым.Поэтому не используйте константу и получайте значение, когда оно должно быть:

, когда пользователь заполнил ввод правильными значениями.Еще один недостаток, который меня беспокоит, это то, что вы называете id ввода как список, или они предназначены для уникального значения ... это не подходит для рекомендации написания ясного и понятного сценария.

Более важно, я думал вес идругие входные данные являются числовыми значениями, но вы записываете ввод как текст.Тем не менее, в JS нет типизированного значения, которое можно было бы использовать в любом случае, но оно не помешает пользователю написать текст во вводе, и любое число будет рассматриваться как строка.

Вы можете легко изменить это, используя тип атрибута HTML5= 'число' и даже максимальные и минимальные требуемые значения, которые будут блокировать ввод реальной формы, если значения находятся в неправильном диапазоне.Это означает, что ваши входные значения могут быть легко установлены на несоответствующие значения, и программа не будет работать или будет отображать глупые ответы, например, установив вес (если это человек) выше возможного веса.

Конечно, это также необходимопроверить значения в функции вычисления в качестве теста if! = isNaN (valueToCheck), чтобы убедиться, что используются числа, а не неадекватные значения, такие как строка.Это недостаток языка, который не имеет строго типизированных значений, надеюсь, в этом есть и преимущества, такие как гибкий способ использования данных, но потребуется их проверка при использовании, чтобы убедиться, что вместо неправильных типов данных и несоответствующих данных используютсясовпадающие.

...