Get value from input and put in a string array lotto game

Get value from input and put in a string array lotto game - javascript

I am new to javascript and I am trying to make a lottery game where I generate 8 random hexadecimal numbers like 15 4A FF 45 77 C3 EE 7E and introduce my numbers.I want to find how many numbers I guessed. I take the values from input and put them into an array and insert space between numbers, then splitting the result.The same with the numbers generated but I can't figure out I don't get the correct result.
<section id="section2">
<h2>Internet Loto</h2>
<button onclick="genHexString();">Genereaza numere</button>
<br />
<button onclick="tryAgain()" ;>Incearca din nou</button>
<p id="loto"></p>
<p class="numere">
<label for="nr1">Nr1:</label>
<input pattern="[A-Z0-9]{2}" id="nr1">
<label for="nr2">Nr2:</label>
<input pattern="[A-Z0-9]{2}" id="nr2">
<label for="nr3">Nr3:</label>
<input pattern="[A-Z0-9]{2}" id="nr3">
<label for="nr4">Nr4:</label>
<input pattern="[A-Z0-9]{2}" id="nr4">
<label for="nr5">Nr5:</label>
<input pattern="[A-Z0-9]{2}" id="nr5">
<label for="nr6">Nr6:</label>
<input pattern="[A-Z0-9]{2}" id="nr6">
<label for="nr7">Nr7:</label>
<input pattern="[A-Z0-9]{2}" id="nr7">
<label for="nr8">Nr8:</label>
<input pattern="[A-Z0-9]{2}" id="nr8">
</p>
</section>
function genHexString() {
var output = "";
for (let i = 0; i < 16; ++i) {
output += (Math.floor(Math.random() * 16)).toString(16).toUpperCase();
document.getElementById("loto").innerHTML += '&nbsp';
if (i % 2 != 0 && i < 15) {
output += '&nbsp'; // space for display each number as pair of 2 characters
}
}
var res = output.split(" ");
document.getElementById("loto").innerHTML = "Winning numbers: " + output;
var input = "";
for (let i = 1; i < 9; i++) {
var x = "nr" + i;
input += document.getElementById(x).value + '&nbsp';
}
var res2 = input.split(" ");
document.getElementById("loto").innerHTML += "<br/>Your numbers: " + res2;
var count = 0;
var i, j;
for (i = 0; i < output.length; i++) {
for (j = 0; j < input.length; j++) {
if (res[i] == res2[j]) {
count += 1;
}
}
}
document.getElementById("loto").innerHTML += "<br/>Numere ghicite: " + count;
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes
includes function can come in hand.
Try this
function genHexString() {
var output = "";
for (let i = 0; i < 16; ++i) {
output += (Math.floor(Math.random() * 16)).toString(16).toUpperCase();
document.getElementById("loto").innerHTML += '&nbsp';
if (i % 2 != 0 && i < 15) {
output += '&nbsp'; // space for display each number as pair of 2 characters
}
}
document.getElementById("loto").innerHTML = "Winning numbers: " + output;
var count = 0;
var input = "";
console.clear();
for (let i = 1; i <= 8; i++) {
var x = `nr${i}`;
let value=document.getElementById(x).value;
if(output.includes(value) && value)
count++;
input += value + '&nbsp';
}
document.getElementById("loto").innerHTML += "<br/>Your numbers: " + input;
document.getElementById("loto").innerHTML += "<br/>Numere ghicite: " + count;
}
label{
margin-left:10px;
}
input{
margin-top:5px;
margin-left:30px;
}
.as-console-wrapper { max-height: 100% !important; top: 0; }
<section id="section2">
<h2>Internet Loto</h2>
<button onclick="genHexString();">Genereaza numere</button>
<br />
<button onclick="tryAgain()" ;>Incearca din nou</button>
<p id="loto"></p>
<p class="numere">
<label for="nr1">Nr1:</label>
<input pattern="[A-Z0-9]{2}" id="nr1">
<label for="nr2">Nr2:</label>
<input pattern="[A-Z0-9]{2}" id="nr2">
<label for="nr3">Nr3:</label>
<input pattern="[A-Z0-9]{2}" id="nr3">
<label for="nr4">Nr4:</label>
<input pattern="[A-Z0-9]{2}" id="nr4">
<label for="nr5">Nr5:</label>
<input pattern="[A-Z0-9]{2}" id="nr5">
<label for="nr6">Nr6:</label>
<input pattern="[A-Z0-9]{2}" id="nr6">
<label for="nr7">Nr7:</label>
<input pattern="[A-Z0-9]{2}" id="nr7">
<label for="nr8">Nr8:</label>
<input pattern="[A-Z0-9]{2}" id="nr8">
</p>
</section>

Related

Loop through the sum of the two inputs until in doubled (javascript)

I am stuck here with duch issue. There are 2 two entry boxes are for an amount and an interest rate (%).
If you click on the button, the page will show an overview of the balance until the amount have to be doubled.
Taking a simple numbers forexample 10 - is amount and 4 - is 4% intereste rate. So the result have to stop on amount of 20.
document.getElementById("button").onclick = loop;
var inputB = document.getElementById("inputB");
var inputC = document.getElementById("inputC");
var result = document.getElementById("result")
function loop() {
var s = inputB.value;
var r = inputC.value;
var doubleS = s * 2;
for (var i = 1; i <= doubleS; i++) {
s = ((r / 100 + 1) * s);
result.innerHTML += s + "<br>";
}
}
<! DOCTYPE html>
<html>
<body>
<br>
<input type="text" id="inputB" value="10"><br>
<input type="text" id="inputC" value="4"><br><br>
<button id="button">Klik</button>
<p> De ingevoerde resultaten: </p>
<p id="result"></p>
<script async src="oefin1.js"></script>
</body>
</html>

The issue is with your for loop bounds.
This will loop doubleX number of times: for (var i = 0; i < doubleX; i++)
This will loop until x surpasses doubleX: for (;x < doubleX;), which btw is better written with a while loop: while (x < doubleX)
document.getElementById("button").onclick = loop;
var inputB = document.getElementById("inputB");
var inputC = document.getElementById("inputC");
var result = document.getElementById("result")
function loop() {
var s = inputB.value;
var r = inputC.value;
var doubleS = s * 2;
result.innerHTML = '';
while (s < doubleS) {
s = ((r / 100 + 1) * s);
result.innerHTML += s + "<br>";
}
}
<input type="text" id="inputB" value="10"><br>
<input type="text" id="inputC" value="4"><br><br>
<button id="button">Klik</button>
<p> De ingevoerde resultaten: </p>
<p id="result"></p>

Easiest way is to just use a for loop without the convoluted math with s in the middle:
function loop() {
var s = inputB.value;
var r = inputC.value;
var doubleS = s * 2;
for (var i = s; i <= doubleS; i *= ((r / 100) + 1)) {
result.innerHTML += i + "<br>";
}
}

use a while loop and check is the value of s is bigger than or equal to doubleS
document.getElementById("button").onclick = loop;
var inputB = document.getElementById("inputB");
var inputC = document.getElementById("inputC");
var result = document.getElementById("result")
function loop() {
var s = inputB.value;
var r = inputC.value;
var doubleS = s * 2;
while(true) {
s = ((r / 100 + 1) * s);
result.innerHTML += s + "<br>";
if(s >= doubleS){
break
}
}
}
<! DOCTYPE html>
<html>
<body>
<br>
<input type="text" id="inputB" value="10"><br>
<input type="text" id="inputC" value="4"><br><br>
<button id="button">Klik</button>
<p> De ingevoerde resultaten: </p>
<p id="result"></p>
<script async src="oefin1.js"></script>
</body>
</html>

Why my InnerHTML code won't display any data in the form fields?

I made a simple change calculator. After playing with the code, I managed to make it calculate the values I needed but I can't make it populate my form. If I use alert, the function is right but if I try to use innerHTML to fill the fields, nothing happens. I am really stuck on this one. :(
var quarters;
var dimes;
var nickels;
var pennies;
function Calculate() {
if (cents >= 25) {
quarters = Math.floor(cents / 25);
var qreminder = cents % 25;
if (qreminder <= 24) {
dimes = Math.floor(qreminder / 10);
var dreminder = qreminder % 10;
}
if (dreminder < 10) {
nickels = Math.floor(dreminder / 5);
var nreminder = dreminder % 5;
}
if (nreminder < 5) {
pennies = nreminder / 1;
}
document.getElementById("quarters").innerHTML = quarters;
document.getElementById("dimes").innerHTML = dimes;
document.getElementById("nickels").innerHTML = nickels;
document.getElementById("pennies").innerHTML = pennies;
}
if (cents < 25) {
quarters = Math.floor(cents / 25);
var qreminder = cents % 25;
if (qreminder <= 24) {
dimes = Math.floor(qreminder / 10);
var dreminder = qreminder % 10;
}
if (dreminder < 10) {
nickels = Math.floor(dreminder / 5);
var nreminder = dreminder % 5;
}
if (nreminder < 5) {
pennies = nreminder / 1;
}
document.getElementById("quarters").innerHTML = quarters;
document.getElementById("dimes").innerHTML = dimes;
document.getElementById("nickels").innerHTML = nickels;
document.getElementById("pennies").innerHTML = pennies;
}
}
var cents = document.getElementById("cents").value;
document.getElementById("calculate").addEventListener("click", Calculate);
<div id="content">
<h1>Change Calculator</h1>
<label>Enter number of cents (0-99):</label>
<input type="text" id="cents" />
<input type="button" value="Calculate" name="calculate" id="calculate" /><br />
<p> </p>
<label>Quarters:</label>
<input type="text" id="quarters" class="disabled" disabled="disabled" /><br />
<label>Dimes:</label>
<input type="text" id="dimes" class="disabled" disabled="disabled" /><br />
<label>Nickels:</label>
<input type="text" id="nickels" class="disabled" disabled="disabled" /><br />
<label>Pennies:</label>
<input type="text" id="pennies" class="disabled" disabled="disabled" /><br />
<p> </p>

Setting the .innerHTML property of <input> types will not do anything. Instead, set the .value property of those elements.
document.getElementById("quarters").value = quarters;
document.getElementById("dimes").value = dimes;
document.getElementById("nickels").value = nickels;
document.getElementById("pennies").value = pennies;

Auto substract both values from 100

I created two input fields where they should substract from each other keeping a max value at 100.
Currently it substracted value is shown in the second value. I want it to be interchangeable. Irrespective of whether I put in first or second input field, the answer shows in the other.
Could someone help?
function updateDue() {
var total = parseInt(document.getElementById("totalval").value);
var val2 = parseInt(document.getElementById("inideposit").value);
// to make sure that they are numbers
if (!total) { total = 0; }
if (!val2) { val2 = 0; }
var ansD = document.getElementById("remainingval");
ansD.value = total - val2;
var val1 = parseInt(document.getElementById("inideposit").value);
// to make sure that they are numbers
if (!total) { total = 0; }
if (!val1) { val1 = 0; }
var ansD = document.getElementById("remainingval");
ansD.value = total - val1;
}
<input type="hidden" id="totalval" name="totalval" value="100" onchange="updateDue()">
<div>
Enter Value:
<input type="text" name="inideposit" class="form-control" id="inideposit" onchange="updateDue()">
</div>
<div>
Substracted:
<input type="text" name="remainingval" class="form-control" id="remainingval" onchange="updateDue()">
</div>

The simple way to achieve this would be to group the inputs by class and attach a single event handler to them. Then you can take the entered value from 100, and set the result to the field which was not interacted with by the user. To do that in jQuery is trivial:
$('.updatedue').on('input', function() {
var total = parseInt($('#totalval').val(), 10) || 0;
var subtracted = total - (parseInt(this.value, 10) || 0);
$('.updatedue').not(this).val(subtracted);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" id="totalval" name="totalval" value="100" />
<div>
Enter Value:
<input type="text" name="inideposit" class="updatedue form-control" id="inideposit" />
</div>
<div>
Subtracted:
<input type="text" name="remainingval" class="updatedue form-control" id="remainingval" />
</div>
You can easily validate this so that outputs < 0 and > 100 can be discounted, if required.

Edit your code as below
function updateDue(box) {
var total = parseInt(document.getElementById("totalval").value);
if(box == 1){
var val = parseInt(document.getElementById("inideposit").value);
// to make sure that they are numbers
if (!total) { total = 0; }
if (!val) { val = 0; }
var ansD = document.getElementById("remainingval");
ansD.value = total - val;
}else if(box == 2){
var val = parseInt(document.getElementById("remainingval").value);
// to make sure that they are numbers
if (!total) { total = 0; }
if (!val) { val = 0; }
var ansD = document.getElementById("inideposit");
ansD.value = total - val;
}
}
<input type="hidden" id="totalval" name="totalval" value="100" onchange="updateDue(0)">
<div>
Enter Value:
<input type="text" name="inideposit" class="form-control" id="inideposit" onchange="updateDue(1)">
</div>
<div>
Substracted:
<input type="text" name="remainingval" class="form-control" id="remainingval" onchange="updateDue(2)">
</div>

how to get different winning% in decreasing order for number of winners?

var result = 0;
function sum() {
var txtFirstNumberValue = document.getElementById('w_amount').value;
var txtSecondNumberValue = document.getElementById('c_size').value;
var result = 0;
if (txtFirstNumberValue > 0) {
result = ((0.15 * parseInt(txtFirstNumberValue)) + parseInt(txtFirstNumberValue)) / parseInt(txtSecondNumberValue);
if (!isNaN(result)) {
document.getElementById('e_fee').value = parseFloat(result).toFixed(0);
}
} else {
document.getElementById('e_fee').value = result;
}
}
// document.getElementById('e_fee').value = result;
function isChecked(checkbox, winnerCount) {
var winner_amount = document.getElementById('w_amount').value;
var chkMultiEntry = document.getElementById("test5");
if (winner_amount.length == 0) {
document.getElementById('err_w_amount').innerHTML = "Please enter winning amount";
chkMultiEntry.checked = false;
} else {
document.getElementById('winnerCount').disabled = !checkbox.checked;
document.getElementById('winner').disabled = !checkbox.checked;
document.getElementById('err_w_amount').remove();
return true;
}
}
var x2;
function set() {
var set = document.getElementById('winnerCount').value;
if (set.length > sum.length) {
document.getElementById('err_winnerCount').remove();
} else {
document.getElementById('set').innerHTML = "Please enter Set No. of Winners";
}
document.getElementById("demo").innerHTML = "Rank &nbsp &nbsp Winning% &nbsp &nbsp &nbsp &nbsp &nbsp Winning Amount";
var x = document.getElementById("w_amount").value;
var w = document.getElementById("c_size").value;
var y = document.getElementById("winnerCount").value;
var a = parseInt(x) / parseInt(y);
var z;
var c;
var b = a / x * 100;
x2 = document.getElementsByClassName('tot');
if (y <= w) {
for (z = 1; z <= parseInt(y); z++) {
document.getElementById("demo1").innerHTML += +z + "&nbsp<input type='text' class='tot' id='perc" + z + "' value='' onkeyup='getValues(this)'/>&nbsp<input type='text' class='pop' id='val" + z + "' value='Rs." + a + "'/><br>";
}
for (i = 0; i < x2.length; i++) {
x2[i].value = b;
}
} else {
alert('errr');
$('#err_winnerCount').innerHTML = "Please enter less than contest size";
}
}
var sharePerc = 0;
function getValues(arg) {
var id = arg.getAttribute('id');
var value = this.value;
var winAmt = document.getElementById("w_amount").value;
var curPerc = document.getElementById(id).value;
//var str = "Visit Microsoft!";
var correspondingId = id.replace("perc", "val");
var curAmt = curPerc * (winAmt / 100);
document.getElementById(correspondingId).value = curAmt;
sharePerc = (100 - curPerc) / (x2.length - 1);
var shareValue = sharePerc * (winAmt / 100);
//console.log((100 - curPerc)/(x2.length-1));
for (var i = 1; i < x2.length + 1; i++) {
if (id != "perc" + i) {
document.getElementById("perc" + i).value = parseFloat(sharePerc).toFixed(0);
document.getElementById("val" + i).value = parseFloat(shareValue).toFixed(0);
}
}
//document.getElementById(id).disabled = true;
}
<form name="form" action="register" method="post" id="userForm">
<ul class="demo">
</br>
<li>Winning Amount:<input type="number" id="w_amount" onkeyup="sum()" onblur="validate()" name="wamount"><span class="err" id="err_w_amount"></span></li>
</br>
<li>Contest Size:<input type="number" id="c_size" onkeyup="sum()" onblur="checkTextField(this);" name="csize" value="2"></li>
</br>
<li>Entry Fee:<input type="number" id="e_fee" name="cname" onkeyup="sum()" value=""></li>
</br>
<!-- <li><input type="checkbox" id="MultiEntry"><p>Join this contest with multiple teams</p></li></br> -->
<li><input type="checkbox" id="test5" onchange="return isChecked(this, 'winnerCount');" /><label for="test5">Customize Winnings</label></li>
<li><span class="inTxt">Set No. of Winners</span>
<input type="number" maxlength="5" placeholder="min 2 & max 100" name="Name" id="winnerCount" disabled="disabled" /> </br>
</br>
<input class="W_set" type="button" name="button" value="Set" id="winner" disabled="disabled" onclick="set()"></input><span class="err" id="err_winnerCount"></span></li>
</br>
</ul>
</form>
<div>
<p id="demo"></p>
<p id="demo1"></p>
<p id="demo2"></p>
</div>
// firstly when giving winning amount and contest size we get the entry fee and after check in customize winning it will enable the set number of winners and set button.In set number of winners the input should be less than the contest size but while entering the greater than contest size it will not showing error message and after clicking set button we get a list of winners in this the winning % should be decreasing order while changing the default winning % of first text box but in my code while changing the second text box it changes the first text box also. if possible please know me how to solve this.

var result = 0;
function sum() {
var txtFirstNumberValue = document.getElementById('w_amount').value;
var txtSecondNumberValue = document.getElementById('c_size').value;
var result = 0;
if (txtFirstNumberValue > 0) {
result = ((0.15 * parseInt(txtFirstNumberValue)) + parseInt(txtFirstNumberValue)) / parseInt(txtSecondNumberValue);
if (!isNaN(result)) {
document.getElementById('e_fee').value = parseFloat(result).toFixed(0);
}
} else {
document.getElementById('e_fee').value = result;
}
}
// document.getElementById('e_fee').value = result;
function isChecked(checkbox, winnerCount) {
var winner_amount = document.getElementById('w_amount').value;
var chkMultiEntry = document.getElementById("test5");
if (winner_amount.length == 0) {
document.getElementById('err_w_amount').innerHTML = "Please enter winning amount";
chkMultiEntry.checked = false;
} else {
document.getElementById('winnerCount').disabled = !checkbox.checked;
document.getElementById('winner').disabled = !checkbox.checked;
document.getElementById('err_w_amount').remove();
return true;
}
}
var x2;
function set() {
$('#err_winnerCount').html("");
var set = document.getElementById('winnerCount').value;
var contestSize = document.getElementById('c_size').value;
if (set > contestSize) {
$('#err_winnerCount').html("");
} else {
//document.getElementById('set').innerHTML = "Please enter Set No. of Winners";
}
var x = document.getElementById("w_amount").value;
var w = parseInt(document.getElementById("c_size").value);
var y = parseInt(document.getElementById("winnerCount").value);
var a = parseInt(x) / parseInt(y);
var z;
var c;
var b = a / x * 100;
x2 = document.getElementsByClassName('tot');
if (y <= w) {
//document.getElementById("demo").innerHTML = "Rank &nbsp &nbsp Winning% &nbsp &nbsp &nbsp &nbsp &nbsp Winning Amount";
var demoTableBody = document.getElementById("demo_table").tBodies[0];
demoTableBody.innerHTML = "";
//console.log(demoTableBody.innerHTML);
for (z = 1; z <= parseInt(y); z++) {
//console.log(demoTableBody.children.length);
var rowIndex = demoTableBody.children.length + 1;
var newRow = "<td>"+rowIndex+"</td>";
newRow += "<td><input type='text' class='tot' id='perc" + rowIndex + "' value='' onkeyup='getValues(this)'/><span class = 'perc_error_spn' id='perc_error" + rowIndex + "'></span></td>";
newRow += "<td><input type='text' class='pop' id='val" + rowIndex + "' value='Rs." + a + "'/></td>";
demoTableBody.innerHTML += newRow;
//document.getElementById("demo1").innerHTML += +z + "&nbsp<input type='text' class='tot' id='perc" + z + "' value='' onkeyup='getValues(this)'/>&nbsp<input type='text' class='pop' id='val" + z + "' value='Rs." + a + "'/><br>";
}
for (i = 0; i < x2.length; i++) {
x2[i].value = b;
}
} else {
alert("errr");
$('#err_winnerCount').html("Please enter less than contest size");
}
}
var sharePerc = 0;
function getValues(arg) {
// clear all error messages.
var errorSpans = document.getElementsByClassName("perc_error_spn");
for(var i = 0; i < errorSpans.length; i++){
errorSpans[i].innerHTML = "";
}
var id = arg.getAttribute('id');
var row_index = arg.parentNode.parentNode.rowIndex;
var value = this.value;
var winAmt = document.getElementById("w_amount").value;
var tmp = 0;
var previousWinnersPercentage = [];
var nextWinnersPercentage = [];
for(var i = 1; i < row_index; i++){
tmp += parseFloat(document.getElementById("perc" + i).value);
previousWinnersPercentage[previousWinnersPercentage.length] = tmp;
}
for(var i = row_index + 1 ; i <= x2.length; i++){
nextWinnersPercentage[nextWinnersPercentage.length] = parseFloat(document.getElementById("perc" + i).value);
}
//winAmt -= tmp;
var curPerc = document.getElementById(id).value;
sharePerc = (100 - tmp - curPerc) / (x2.length - row_index);
var isInvalidInput = isBiggerThanPreviousPercentage(previousWinnersPercentage,curPerc);
if(!isInvalidInput){
isInvalidInput = isLesserThanPreviousPercentage(nextWinnersPercentage,curPerc);
}
if((sharePerc <= 0 && x2.length > 1) || isInvalidInput){
var errorSpan = id.replace("perc", "perc_error");
document.getElementById(errorSpan).innerHTML = "Invalid input";
return;
}
//var str = "Visit Microsoft!";
var correspondingId = id.replace("perc", "val");
var curAmt = curPerc * (winAmt / 100);
document.getElementById(correspondingId).value = curAmt;
sharePerc = (100 - tmp - curPerc) / (x2.length - row_index);
var shareValue = sharePerc * (winAmt / 100);
//console.log((100 - curPerc)/(x2.length-1));
for (var i = row_index; i <= x2.length; i++) {
if (id != "perc" + i) {
document.getElementById("perc" + i).value = parseFloat(sharePerc).toFixed(0);
document.getElementById("val" + i).value = parseFloat(shareValue).toFixed(0);
}
}
//document.getElementById(id).disabled = true;
}
function reorderPercentage(){
var demoTableBody = document.getElementById("demo_table").tBodies[0];
for(var i = 0; i < demoTableBody.children.length; i++){
var percentageInput = demoTableBody.children[i].querySelector(".tot");
//console.log(percentageInput.value);
var row = percentageInput.parentNode.parentNode,
sibling = row.nextElementSibling,
parent = row.parentNode;
var siblingPercentageValue = "";
//console.log(sibling);
if(sibling != null){
siblingPercentageValue = sibling.querySelector(".tot").value;
}
if(percentageInput.value < siblingPercentageValue){
parent.insertBefore(sibling,row);
}
}
}
function isBiggerThanPreviousPercentage(array,value) {
var result = false;
result = array.some(function (e) {
if(value > e){
return true;
}
});
return result;
}
function isLesserThanPreviousPercentage(array,value) {
var result = false;
result = array.some(function (e) {
if(value < e){
return true;
}
});
return result;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form" action="register" method="post" id="userForm">
<ul class="demo">
</br>
<li>Winning Amount:<input type="number" id="w_amount" onkeyup="sum()" name="wamount"><span class="err" id="err_w_amount"></span></li>
</br>
<li>Contest Size:<input type="number" id="c_size" onkeyup="sum()" onblur="checkTextField(this);" name="csize" value="3"></li>
</br>
<li>Entry Fee:<input type="number" id="e_fee" name="cname" onkeyup="sum()" value=""></li>
</br>
<!-- <li><input type="checkbox" id="MultiEntry"><p>Join this contest with multiple teams</p></li></br> -->
<li><input type="checkbox" id="test5" onchange="return isChecked(this, 'winnerCount');" /><label for="test5">Customize Winnings</label></li>
<li><span class="inTxt">Set No. of Winners</span>
<input type="number" maxlength="5" placeholder="min 2 & max 100" name="Name" id="winnerCount" disabled="disabled" /> </br>
</br>
<input class="W_set" type="button" name="button" value="Set" id="winner" disabled="disabled" onclick="set()"/><span class="err" id="err_winnerCount"></span>
<input type="button" value="Reorder" onclick="reorderPercentage();"/>
</br>
</ul>
</form>
<div>
<p id="demo"></p>
<p id="demo1"></p>
<p id="demo2"></p>
<table id="demo_table">
<thead>
<tr>
<th>Rank</th>
<th>Winning %</th>
<th>Winning Amount</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
table, th, td {
border: 1px solid black;
}
</style>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">10 Winners</button>
<div class="dropdown-content">
<table style="width:100%">
<tr>
<th>Rank</th>
<th>Prize</th>
</tr>
<tr>
<td>1</td>
<td>1000</td>
</tr>
<tr>
<td>2-5</td>
<td>500</td>
</tr>
<tr>
<td>6-10</td>
<td>100</td>
</tr>
</table>
</div>
</div>
</body>
If you input number of winners greater than contest size it will prompt an alert box. Check and let me know that is it working or not?
Due to below code both the text boxes are modified simultaneously.
If you can explain the below code, why you are using this
for (var i = 1; i < x2.length + 1; i++) {
if (id != "perc" + i) {
document.getElementById("perc" + i).value = parseFloat(sharePerc).toFixed(0);
document.getElementById("val" + i).value = parseFloat(shareValue).toFixed(0);
}
}

Button isn't working at all

I am making a program that has an array of numbers and then the user inputs some values in and clicks on verify. the value he enters has to be in order with the array of numbers and if it isn't the user gets an alert message sorry.
The value inside the first input bar decides from which number of the array should the comparison should start. For example, if the array holds numbers like {2,4,6,8,10} and the user enters 6 in the first input bar and then he enters 8 and 10 in the next two bars, he should get the result "678"
If he doesn't get the first number right lets say he enters 3, and since 3 isn't in the array, then it doesn't matter what he enters in the other input bars, he would get the result "Sorry".
Similarly, if the user types 4 in the first input bar but then then in the second bar he types 8, he should still get the result "Sorry" since the order of the array is {4,6,8} not {4,8}.
I made a program but whenever I click on the verify button, nothing happens.
Here is my codes. and here is also the result I am getting:
https://jsfiddle.net/53j19rpt/
<html>
<head>
</head>
<script type="text/javascript">
var arr = [];
var t;
var num = 2;
var x = [];
for (var x = 0; x < 4; x++) {
document.getElementById("one" + x);
}
function go() {
for (var t = 0; t < 4; k++) {
x[t] = num * (t + 1);
}
for (var k = 0; k < 4; k++) {
if (document.getElementById("one0").value >= x[k])
if (document.getElementById("one" + k).value == x[k])
document.write(document.getElementById("one" + k).value);
else
document.write("Sorry");
}
}
</script>
<body>
<input id="one0" type="text">
<input id="one1" type="text">
<input id="one2" type="text">
<input id="one3" type="text">
<input type="button" id="verifyBtn" value="verify" onclick="go()">
</body>
</html>

Version 1 - all 4 have to be correct in order
var x = [],num=2;
// I assume you will want to change this to random later
for (var i = 0; i < 4; i++) {
x[i] = num * (i + 1);
}
console.log(x);
function go() {
var found=0;
for (var i = 0; i < 4; i++) {
if (document.getElementById("one" + i).value == x[i]) {
found++;
}
}
document.getElementById("result").innerHTML = found==x.length?x:"Sorry";
}
<input id="one0" type="text" value="" />
<input id="one1" type="text" value="" />
<input id="one2" type="text" value="" />
<input id="one3" type="text" value="" />
<input type="button" id="verifyBtn" value="verify" onclick="go()" />
<span id="result"></span>
Version 2 Error if anything entered is wrong
var x = [],
num = 2;
// I assume you will want to change this to random later
for (var i = 0; i < 4; i++) {
x[i] = ""+num * (i + 1); // make string
}
console.log(x);
window.onload = function() {
var field = document.querySelectorAll(".entry");
for (var i = 0; i < field.length; i++) {
field[i].onkeyup = function() {
document.getElementById("result").innerHTML = (x.indexOf(this.value) == -1)?"Sorry":this.value;
}
}
}
function go() {
var field = document.querySelectorAll(".entry"),
error = false,
res = "";
for (var i = 0; i < field.length; i++) {
res += field[i].value; // string concatenation
}
document.getElementById("result").innerHTML = (res == x.join("")) ? res : "Sorry";
}
<input class="entry" id="one0" type="text" value="" />
<input class="entry" id="one1" type="text" value="" />
<input class="entry" id="one2" type="text" value="" />
<input class="entry" id="one3" type="text" value="" />
<input type="button" id="verifyBtn" value="verify" onclick="go()" /><br/>
<span id="result">test</span>
Version 3 - any 1, 2, 3 or 4 entries are deemed correct if they are subpart of array, e.g. 46 is ok and so is 68 but not 26
var x = [],
num = 2;
// I assume you will want to change this to random later
for (var i = 0; i < 4; i++) {
x[i] = ""+num * (i + 1); // make string
}
console.log(x);
window.onload = function() {
var field = document.querySelectorAll(".entry");
for (var i = 0; i < field.length; i++) {
field[i].onkeyup = function() {
document.getElementById("result").innerHTML = (x.indexOf(this.value) == -1)?"Sorry":this.value;
}
}
}
function go() {
var field = document.querySelectorAll(".entry"),
error = false,
res = [];
for (var i = 0; i < field.length; i++) {
if (x.indexOf(field[i].value) !=-1) res.push(field[i].value);
}
document.getElementById("result").innerHTML = (x.join(".").indexOf(res.join("."))!=-1) ? res : "Sorry";
}
<input class="entry" id="one0" type="text" value="" />
<input class="entry" id="one1" type="text" value="" />
<input class="entry" id="one2" type="text" value="" />
<input class="entry" id="one3" type="text" value="" />
<input type="button" id="verifyBtn" value="verify" onclick="go()" /><br/>
<span id="result">test</span>

If I understand your question well this should work:
<html>
<head>
</head>
<body>
<input id="one0" type="text" value="">
<input id="one1" type="text" value="">
<input id="one2" type="text" value="">
<input id="one3" type="text" value="">
<input type="button" id="verifyBtn" value="verify" onclick="go()">
<script type="text/javascript">
function go() {
var arrinputs = [];
var arr = [2, 4, 10, 12];
for (var x = 0; x < 4; x++) {
var tmp = parseInt(document.getElementById("one" + x).value)
if (!isNaN(tmp))
arrinputs.push(tmp);
}
var a = "-" + arrinputs.join('-') + "-";
var b = "-" + arr.join('-') + "-";
if (b.indexOf(a) != -1) {
alert("Ok!");
} else {
alert("Sorry!");
}
}
</script>
</body>
</html>
Test 1 (check array 2, 4, 6, 8)
Returns: Corrent
Test 2 (check array 2, 4, 6, 8)
Returns: Corrent
Test 3 (check array 2, 4, 6, 8)
Returns: Sorry
Test 4 (check array 2, 4, 10, 12)
Returns: Corrent
Test 5 (check array 2, 4, 10, 12)
Returns: Sorry
Test 6 (check array 2, 4, 10, 12)
Returns: Sorry

We Keep Coding

JavaScript is the programming language of the Web.

Get value from input and put in a string array lotto game - javascript

Related

Loop through the sum of the two inputs until in doubled (javascript)

Why my InnerHTML code won't display any data in the form fields?

Auto substract both values from 100

how to get different winning% in decreasing order for number of winners?

Button isn't working at all

Categories

Resources