Dom Javascript how can I connect my html form with my Javascript code
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....
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. Please check for me my code to see if you could help me to fix this issue.
My project link on 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>
Now my button and paragraph for displaying result are working fine but those two inputs are not working on 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. 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
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. 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. Both scales will now equal 11 and they are perfectly balanced. 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.Conditions
- The first element of the scale can only contain 2 weights
- 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”
UI Design:
- 2 inputs to take the 2 elements of the Scale
- A button to calculate the needed weight to balance
- A div to display the result
1 answers
solution1
0 2019-05-15 03:26:16
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.
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. 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. 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.