|
I'm creating an chrome extension with angular-cli, I did the popup extension and it work fine, but I want to initiate the application (bootstrap) from another way, example when the browser call a options page of the extension, or when I want to run an another .html wich I have on extension.
The question is, how to configure the angular-cli to initiate the app from another .html file wich is no just index.html.
Danke
|
|
|
|
|
Im using this function to go through my values that are in an array to find if they equal a small straight ("1234" or "2345" or "3456");
I decided the way id get this to work is by using regular expression , which worked if I got for example "12345". However if i got duplicates of a value , example "12234" it would not work. I used the filter function to get rid of the duplicate values, which worked however when it comes to my regular expressions it keeps returning null even when my x value returns for example "1234". Im thinking there has something to do with the filter function since without it i get values returned but I need it in order to get rid of duplicate values. console[^]
function smstraight(){
var score=0;
var x=dice_value.sort();
x=x.filter(function(item,index,inputArray){
return x=inputArray.indexOf(item) ==index;
}).join("");
var r1= /\B(1234)/g;
var a= x.match(r1);
var r2=/\B(2345)/g;
var b= x.match(r2);
var r3=/\B(3456)/g;
var c= x.match(r3);
console.log(x);
if(b== "2345" || a== "1234"|| c=="3456" || x== "12345"||x=="23456"){
console.log("hey it works");
score+= 30;
$('.sm').html(score);
}
}
|
|
|
|
|
I don't think RegEx is the right tool for this. You'd be better served by iterating the array and evaluating for unique values and building a result in the same step:
function smstraight(){
var score=$('.sm').html(score);
var source=dice_value.sort();
var result = [source[0]];
for(var i=1; i < source.length, i++){
if(source[i] == source[i-1] + 1) {
result.push(source[i]);
}
}
if(result.length == 4)
{
console.log("hey it works");
$('.sm').html(score+30);
}
}
Please not I just wrote this in the post, so it's not exactly tested and should be treated as conceptual.
"There are three kinds of lies: lies, damned lies and statistics."
- Benjamin Disraeli
|
|
|
|
|
I wanted to take this code and change the image.src and make it into an ajax request or something like that to have the source for the photos be a user's flickr photos. I tried doing this on my own using the flickr api, but it wouldn't work. Does anyone know how I could do this? Thanks!
JavaScript code is pasted below from this person's code pen:
Infinite Scroll + Pagination[^]
function getPageId(n) {
return 'article-page-' + n;
}
function getDocumentHeight() {
const body = document.body;
const html = document.documentElement;
return Math.max(
body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight
);
};
function getScrollTop() {
return (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
}
function getArticleImage() {
const hash = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER);
const image = new Image;
image.className = 'article-list__item__image article-list__item__image--loading';
image.src = 'http://api.adorable.io/avatars/250/' + hash;
image.onload = function() {
image.classList.remove('article-list__item__image--loading');
};
return image;
}
function getArticle() {
const articleImage = getArticleImage();
const article = document.createElement('article');
article.className = 'article-list__item';
article.appendChild(articleImage);
return article;
}
function getArticlePage(page, articlesPerPage = 16) {
const pageElement = document.createElement('div');
pageElement.id = getPageId(page);
pageElement.className = 'article-list__page';
while (articlesPerPage--) {
pageElement.appendChild(getArticle());
}
return pageElement;
}
function addPaginationPage(page) {
const pageLink = document.createElement('a');
pageLink.href = '#' + getPageId(page);
pageLink.innerHTML = page;
const listItem = document.createElement('li');
listItem.className = 'article-list__pagination__item';
listItem.appendChild(pageLink);
articleListPagination.appendChild(listItem);
if (page === 2) {
articleListPagination.classList.remove('article-list__pagination--inactive');
}
}
function fetchPage(page) {
articleList.appendChild(getArticlePage(page));
}
function addPage(page) {
fetchPage(page);
addPaginationPage(page);
}
const articleList = document.getElementById('article-list');
const articleListPagination = document.getElementById('article-list-pagination');
let page = 0;
addPage(++page);
window.onscroll = function() {
if (getScrollTop() < getDocumentHeight() - window.innerHeight) return;
addPage(++page);
};
|
|
|
|
|
Greetings mates.
This is really a jQuery question but since is integrated with classic asp, it could be deleted if I post it on jquery for asp.net forum, hence here.
I am building a questionnaire (sort of) form and some of responses might require additional textboxes.
As a result, we are trying to use jquery or just regular JavaScript to give participants the opportunity to add additional rows to each div should they wish to.
So far, the simple JavaScript I am using is not working.
For instance, I have a div with ID of "addrow". with an ADD button next to that div.
Our expectation is that if the participant clicks that ADD button, the textboxes inside that div should be cloned to as many rows as they wish.
However, when I click the ADD button, it adds just one textbox.
Can someone please help?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Questionnaires</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
.bs-example{
margin-left: 250px;
margin-top: 30px;
}
</style>
<script type="text/javascript">
var NumOfRow = 1;
function Button1_onclick(){
NumOfRow++;
var addrow = document.getElementById('addrow');
var newDiv = document.createElement('div');
newDiv.setAttribute('id','innerDiv'+NumOfRow);
var newSpan = document.createElement('span');
newSpan.innerHTML = "Complete the following";
var newTextBox = document.createElement('input');
newTextBox.type = 'text';
newTextBox.setAttribute('id','sourcename1'+NumOfRow);
newTextBox.setAttribute('id','sourceaddress1'+NumOfRow);
newTextBox.setAttribute('id','income1'+NumOfRow);
var newButton = document.createElement('input');
newButton.type = 'button';
newButton.value = 'Remove';
newButton.id = 'btn'+NumOfRow;
newButton.onclick = function RemoveEntry() {
var addrow = document.getElementById('addrow');
addrow.removeChild(this.parentNode);
}
newDiv.appendChild(newSpan);
newDiv.appendChild(newTextBox);
newDiv.appendChild(newButton);
addrow.appendChild(newDiv);
}
</script>
</head>
<body>
<div class="bs-example">
<form class="form-inline" action="process.asp" role="form">
<div class="form-group">
<label for="employeename">Employee Name</label><br>
<input type="text" style="width:375px;" class="form-control" name="employeename" id="employeename" placeholder="Employee name...">
</div>
<div class="form-group">
<label for="ttitle">Title</label><br>
<input type="text" style="width:375px;" class="form-control" name="ttitle" id="ttitle" placeholder="Title...">
</div><br><br><br>
<div id="addrow">
<div class="form-group">
<label for="sourcename1">Name</label><br>
<input type="text" style="width:250px;" class="form-control" name="sourcename1" id="sourcename1" placeholder="Name of income source...">
</div>
<div class="form-group">
<label for="sourceaddress1">Address</label><br>
<input type="text" style="width:250px;" class="form-control" name="sourceaddress1" id="sourceaddress1" placeholder="Address of income source">
</div>
<div class="form-group">
<label for="income1">Income</label><br>
<input type="text" style="width:250px;" class="form-control" name="income1" id="income1" placeholder="income...">
</div></div><input id="Button1" type="button" value="Add More" onclick="Button1_onclick()" /> <br><br><br>
<div class="form-group">
<label for="spousename">Name</label><br>
<input type="text" style="width:250px;" class="form-control" name="spousename" id="spousename" placeholder="Spouse Name...">
</div>
<div class="form-group">
<label for="spouseAddress">Address</label><br>
<input type="text" style="width:250px;" class="form-control" name="spouseAddress" id="spouseAddress" placeholder="Address of income source...">
</div>
<div class="form-group">
<label for="spouseIncome">Income</label><br>
<input type="text" style="width:250px;" class="form-control" name="spouseIncome" id="spouseIncome" placeholder="Income...">
</div><br><br><br>
<div class="form-group">
<label for="dividentname">Name</label><br>
<input type="email" style="width:250px;" class="form-control" name="dividentname" id="dividentname" placeholder="Divident name...">
</div>
<div class="form-group">
<label for="dividentaddress">Address</label><br>
<input type="text" style="width:250px;" class="form-control" name="dividentaddress" id="dividentaddress" placeholder="Address of divident...">
</div>
<div class="form-group">
<label for="dividentAmt">Divident Amount</label><br>
<input type="text" style="width:250px;" class="form-control" name="reimbursmentName" id="reimbursmentName" placeholder="Divident amount...">
</div><br><br><br>
<div class="form-group">
<label for="reimbursmentName">Name</label><br>
<input type="text" style="width:250px;" class="form-control" name="reimbursmentName" id="reimbursmentName" placeholder="Reimbursement name...">
</div>
<div class="form-group">
<label for="reimburseAddr">Address of Reimbursement</label><br>
<input type="password" style="width:250px;" class="form-control" name="reimburseAddr" id="reimburseAddr" placeholder="Reimbursement Address...">
</div>
<div class="form-group">
<label for="remursementAmt">Reinbursement Amount</label><br>
<input type="text" style="width:250px;" class="form-control" name="remursementAmt" id="remursementAmt" placeholder="Remursement Amount">
</div><br><br><br>
<div class="form-group">
<label for="inputHonoraria">Honoraria</label><br>
<input type="text" style="width:250px;" class="form-control" name="inputHonoraria" id="inputHonoraria" placeholder="Honoraria from a single source...">
</div>
<div class="form-group">
<label for="giftname">Name</label><br>
<input type="text" style="width:250px;" class="form-control" name="giftname" id="giftname" placeholder="Gift name...">
</div>
<div class="form-group">
<label for="giftaddress">Gift Address</label><br>
<input type="text" style="width:250px;" class="form-control" name=giftaddress" id="giftaddress" placeholder="Address of gift...">
</div><br><br><br>
<div class="form-group">
<label for="giftamount">Gift Amount</label><br>
<input type="text" style="width:250px;" class="form-control" name=giftamount" id="giftamount" placeholder="Gift amount...">
</div>
<div class="form-group">
<label for="orgname">Name of Organization</label><br>
<input type="text" style="width:250px;" class="form-control" name="orgname" id="orgname" placeholder="Name of organization...">
</div>
<div class="form-group">
<label for="orgaddresss">Address of Organization</label><br>
<input type="text" style="width:250px;" class="form-control" name="orgaddresss" id="orgaddresss" placeholder="Address of organization...">
</div><br><br><br>
<div class="form-group">
<label for="creditorname">Name of Creditor</label><br>
<input type="text" style="width:250px;" class="form-control" name="creditorname" id="creditorname" placeholder="Name of creditor...">
</div>
<div class="form-group">
<label for="creditoraddress">Address of creditor</label><br>
<input type="text" style="width:250px;" class="form-control" name="creditoraddress" id="creditoraddress" placeholder="Address of creditor...">
</div>
<div class="form-group">
<label for="creditAmt">Credit Amount</label><br>
<input type="text" style="width:250px;" class="form-control" name="creditAmt" id="creditAmt" placeholder="Credit Amount...">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<br>
</div>
</body>
</html>
Many thanks for your help.
modified 17-Feb-17 8:55am.
|
|
|
|
|
samflex wrote: However, when I click the ADD button, it adds just one textbox.
Because you're only adding one textbox:
samflex wrote:
var newTextBox = document.createElement('input');
newTextBox.type = 'text';
newTextBox.setAttribute('id','sourcename1'+NumOfRow);
newTextBox.setAttribute('id','sourceaddress1'+NumOfRow);
newTextBox.setAttribute('id','income1'+NumOfRow);
...
newDiv.appendChild(newTextBox);
Setting the id attribute on the one element three times doesn't magically turn it into three elements. 
This looks like the sort of thing where AngularJS[^] or Handlebars.js[^] would probably help.
For example, using Handlebars:
<script id="row-template" type="text/x-handlebars-template">
<div>
<div class="form-group">
<label for="sourcename{{rowNumber}}">Name</label><br>
<input type="text" style="width:250px;" class="form-control" name="sourcename{{rowNumber}}" id="sourcename{{rowNumber}}" placeholder="Name of income source...">
</div>
<div class="form-group">
<label for="sourceaddress{{rowNumber}}">Address</label><br>
<input type="text" style="width:250px;" class="form-control" name="sourceaddress{{rowNumber}}" id="sourceaddress{{rowNumber}}" placeholder="Address of income source">
</div>
<div class="form-group">
<label for="income{{rowNumber}}">Income</label><br>
<input type="text" style="width:250px;" class="form-control" name="income{{rowNumber}}" id="income{{rowNumber}}" placeholder="income...">
</div>
<input id="Button{{rowNumber}}" type="button" rel="remove-row" value="Remove" />
</div>
</script>
<div id="addrow">
<div>
<div class="form-group">
<label for="sourcename1">Name</label><br>
<input type="text" style="width:250px;" class="form-control" name="sourcename1" id="sourcename1" placeholder="Name of income source...">
</div>
<div class="form-group">
<label for="sourceaddress1">Address</label><br>
<input type="text" style="width:250px;" class="form-control" name="sourceaddress1" id="sourceaddress1" placeholder="Address of income source">
</div>
<div class="form-group">
<label for="income1">Income</label><br>
<input type="text" style="width:250px;" class="form-control" name="income1" id="income1" placeholder="income...">
</div>
</div>
</div>
<input type="button" value="Add More" rel="add-row" />
$(function(){
var rowCount = 1;
var rowSource = $("#row-template").html();
var rowTemplate = Handlebars.compile(rowSource);
$("form").on("click", "input[rel='add-row']", function(){
rowCount++;
var context = { rowNumber: rowCount };
var html = rowTemplate(context);
$("#addrow").append(html);
});
$("form").on("click", "input[rel='remove-row']", function(){
var addrow = document.getElementById('addrow');
addrow.removeChild(this.parentNode);
});
});
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Hi Richard,
You explain it so well. Thank you so much.
Now, I have not used AngularJS before. So, if I have to use your code as is, do I need to install or import any libraries or is it just plug and play?
Also, I went ahead and added name attribute as well like below:
newTextBox.type = 'text';
newTextBox.setAttribute('id','name','sourcename1'+NumOfRow);
newTextBox.setAttribute('id','name','sourceaddress1'+NumOfRow);
newTextBox.setAttribute('id','name','income1'+NumOfRow);
Will my php be able to tell that I have say, sourcename1,sourcename2, etc by just adding the name attribute?
I can come up with the php code to grab all the values and insert into the database.
Many thanks,
|
|
|
|
|
The example I posted was using Handlebars.js[^] - you just need to add a reference to the script file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js" integrity="sha256-1O3BtOwnPyyRzOszK6P+gqaRoXHV6JXj8HkjZmPYhCI=" crossorigin="anonymous"></script>
In the template, I've given the fields sequential names, so you'll get sourcename1, sourcename2, etc. Obviously, if the user removes a row, you could get a gap in the sequence. You might want to add a hidden field within each row's <div> with a fixed name, which would then give you the list of IDs to look for in your PHP code:
<script id="row-template" type="text/x-handlebars-template">
<div>
<input type="hidden" name="rowIDs" value="{{rowNumber}}" />
...
</div>
</script>
<div id="addrow">
<div>
<input type="hidden" name="rowIDs" value="1" />
...
</div>
</div>
$rowIDs = $_POST['rowIDs'];
foreach ($rowIDs as $id) {
$sourcename = $_POST['sourcename' . $id];
$sourceaddress = $_POST['sourceaddress' . $id];
$income = $_POST['income' . $id];
...
}
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
You are just so awesome.
I did however, add a reference before this response:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
but when I click on the Add More, nothing happens.
I really like this AngularJS because looking at the code, it will ensure that similar textbox styles are maintained but it is not working so far.
The original javascript is adding the three boxes but the styles are completely off.
|
|
|
|
|
You've added a reference to AngularJS. As I said, the example I posted was using Handlebars.
You'll need to remove the Angular reference and add the Handlebars one. If you haven't already included it, you'll also need a reference for jQuery.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Oh I see.
Thanks so much sir.
|
|
|
|
|
WOW!!!
This is so awesome. Textbox size and styling are maintained. WOW.
Just one last question please sir?
I need to use same Add More to the rest.
In other words, rather than add rest of the control to the AngularJS script, I need to add the Add More button to a few more of the controls within their respective DIV.
For instance, we have added this button to the with ID of addrow.
Assume that I have another with ID of addrow1, do just add another handlebars with a separate unique and wrap it around the DIV I need to add the button to?
For instance, this becomes:
<script id="row-template1" type="text/x-handlebars-template">
etc
|
|
|
|
|
samflex wrote: AngularJS
Handlebars.
samflex wrote: Assume that I have another <div> with ID of addrow1, do just add another handlebars with a separate unique and wrap it around the DIV I need to add the button to?
Effectively, yes.
You'll need some way to know which Handlebars template to use, and which <div> to append it to, based on the button that was clicked.
Something like this should work:
<script id="row-template" type="text/x-handlebars-template">
<div>
<input type="hidden" name="rowIDs" value="{{rowNumber}}" />
...
<input id="Button{{rowNumber}}" type="button" rel="remove-row" value="Remove" />
</div>
</script>
<div id="addrow" data-row-count="1" data-template-id="row-template">
<div>
<input type="hidden" name="rowIDs" value="1" />
...
</div>
</div>
<input type="button" value="Add More" rel="add-row" data-target="addrow" />
...
<script id="row-template-2" type="text/x-handlebars-template">
<div>
<input type="hidden" name="row2IDs" value="{{rowNumber}}" />
...
<input id="Button{{rowNumber}}" type="button" rel="remove-row" value="Remove" />
</div>
</script>
<div id="addrow2" data-row-count="1" data-template-id="row-template-2">
<div>
<input type="hidden" name="row2IDs" value="1" />
...
</div>
</div>
<input type="button" value="Add More" rel="add-row" data-target="addrow2" />
$(function(){
var templates = {
"row-template": Handlebars.compile($("#row-template").html()),
"row-template-2": Handlebars.compile($("#row-template-2").html())
};
$("form").on("click", "input[rel='add-row']", function(){
var containerId = $(this).data("target");
var container = $("#" + containerId);
var templateId = container.data("templateId");
var template = templates[templateId];
var rowCount = container.data("rowCount");
rowCount++;
var context = { rowNumber: rowCount };
var html = template(context);
container.append(html);
container.data("rowCount", rowCount);
});
$("form").on("click", "input[rel='remove-row']", function(){
var row = this.parentNode;
var container = row.parentNode;
container.removeChild(row);
});
});
Here's a quick demo: Edit fiddle - JSFiddle[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
I did it differently yesterday which worked but I will adapt this solution.
It is cleaner and more efficient.
You have been incredibly generous and patient. Thanks so much sir.
It is just not the code you provide but you explain it so well.
Many thanks.
|
|
|
|
|
I have a Web user control with its Javascript code in a JS file. Here is the code in the JS File.
function CtrlColor() {}
CtrlColor.prototype = {
Change: function() {
if (Category == '1') {
this.pnlSearchClientID.style.backGroundColor = 'Red';
} else {
this.pnlSearchClientID.style.backGroundColor = 'Blue';
}
}
};
The User Control has a Panel whose color i want to change from a Page. Here is the User Control:
<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="CtrlName.ascx.vb" Inherits="MultiInstanceControl.CtrlName" %>
<asp:Panel ID="pnlSearch" runat="server" Style="background-color: yellow;width: 30px;height: 30px;"></asp:Panel>
<script type="text/javascript" src="CtrlNameJS.js"></script>
<script type="text/javascript">
function CtrlName <%= me.ClientID %> () {
this.pnlSearchClientID = <%= pnlSearch.ClientID %> ;
}
CtrlName <%= me.ClientID %> = CtrlColor.prototype;
</script>
Category is a Server Side property of the Web Control, which I set in the Markup of the page.
In the Page I have 2 Instances of the above Web user Control.
<form id="form1" runat="server">
<div> 1. First Instance
<uc1:CtrlName ID="CtrlName1" IsMultipleFile="false" Category="1" runat="server" />
<asp:Button runat="server" ID="btnTest1" Text="Get Value" OnClientClick="return btnTest_ClientClick('1');" />
<br /> 2. Second Instance
<uc1:CtrlName ID="CtrlName2" IsMultipleFile="false" Category="2" runat="server" />
<asp:Button runat="server" ID="Button2" Text="Get Value" OnClientClick="return btnTest_ClientClick('2');" />
</div>
<script type="text/javascript">
var inst1 = null;
var inst2 = null;
inst1 = new CtrlName<%= CtrlName1.ClientID %> ();
inst2 = new CtrlName<%= CtrlName2.ClientID %> ();
function btnTest_ClientClick(strVal) {
if (strVal == '1') {
inst1.Change();
} else {
inst2.Change();
}
return false;
}
</script>
</form>
When I execute this, it throws an error:
CtrlNameCtrlName1 is not a constructor
at this line
inst1 = new CtrlName<%=CtrlName1.ClientID %>();
Any suggestion where I am going wrong?
|
|
|
|
|
HemeshSoni wrote: function CtrlName <%= me.ClientID %> ()
Have you really got the space in there, or was that a typo in your question?
HemeshSoni wrote: CtrlName <%= me.ClientID %> = CtrlColor.prototype;
Again with the space. And shouldn't you be assigning the prototype, rather than overwriting the function?
CtrlName<%= me.ClientID %>.prototype = CtrlColor.prototype;
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Yes it was a typing mistake, there is no space between the
CtrlName<%= me.ClientID %>
|
|
|
|
|
Thank you Richard, it worked.
|
|
|
|
|
Hy,
I am one of those who have problems with url. I have mvc app with angular. It works on VS and on IIS on 5577 port, but on 80 port doesn`t. Why?
I got 404 in console that url based on adress/control/function is not found. Isn`t this problem with url routing? I still cant get out of it. I did aspnetregiis command, which was succesfull and inserted
runAllManagedModulesForAllRequests="true"
in config file.
Still not working. any ideas? There is static file handler in IIS. Should it be removed?
|
|
|
|
|
Are you using OWIN?
"There are three kinds of lies: lies, damned lies and statistics."
- Benjamin Disraeli
|
|
|
|
|
As far as I see, OWIN is only in my config file where it was automaticaly created. I don`t use it directly anywhere.
|
|
|
|
|
It works on a different port, so that wouldn't have mattered. I blame Monday-morning brain and apologize.
It sounds like you have this problem:
iis 7 - ASP.NET Web API application gives 404 when deployed at IIS 7 - Stack Overflow
There are a number of possible solutions in there, though I've always preferred the specific handler vs the runAll... method.
"There are three kinds of lies: lies, damned lies and statistics."
- Benjamin Disraeli
|
|
|
|
|
|
Created a loop to loop through an array based on the values from the dice roll. Trying to get all the possible scores for a yahtzee game. so far I have it working to that it does add the scores based on the roll example1
I also have it working so that it does not continue to add the score if the a certain die is selected
However my issue is that it keeps increasing the score instead of starting over on subsequent rolls example2
<pre>$(document).ready(function(){
var die1=$('.die1');
var die2=$('.die2');
var die3=$('.die3');
var die4=$('.die4');
var die5=$('.die5');
var turns=3;
var dice;
var dice_value = new Array(5);
var ones=0;
var twos=0;
var threes=0;
var fours=0;
var fives=0;
var sixes=0;
var die;
function roll(die,i){
rando = Math.floor(Math.random()*6)+1;
die.html("<img src=images/die"+rando+".png>");
die.find('img').attr('class', rando);
dice_value[i]=rando;
$('img').height(50);
};
$('.die').click(function(){
$(this).toggleClass('selected');
});
$('.button').click(function(){
for(i=0; i<=turns; turns--){
if(turns>0){
dice =[die1,die2,die3,die4,die5];
for(i=0; i<dice.length;i++){
if (!dice[i].hasClass('selected')){
roll(dice[i],i);
die= dice[i].find('img').attr('class');
}
}
}
else{
$('.warning').html('Pick a category!');
}
}
for(var i=0; i< dice_value.length;i++){
if(!dice[i].hasClass('selected') && turns > 0){
if( dice_value[i] == 1){
ones= ones+1;
$('.aceScore').html(ones);
}
if( dice_value[i] == 2){
twos= twos+2;
$('.twoScore').html(twos);
}
if( dice_value[i] == 3){
threes= threes+3;
$('.threeScore').html(threes);
}
if( dice_value[i] == 4){
fours= fours+4;
$('.fourScore').html(fours);
}
if( dice_value[i] == 5){
fives= fives+5;
$('.fiveScore').html(fives);
}
if( dice_value[i] == 6){
sixes= sixes+6;
$('.sixScore').html(sixes);
}
}
}
});
console.log(ones);
console.log(twos);
console.log(threes);
console.log(fours);
console.log(fives);
console.log(sixes);
});
<pre lang="HTML"><pre><table border="1" height='200' >
<tr>
<th colspan="3">Upper Section</th>
</tr>
<tr>
<td>Aces</td>
<td>Sum of all the ones</td>
<td class="score aceScore"></td>
</tr>
<tr>
<td>Twos</td>
<td>Sum of all the twos</td>
<td class="score twoScore"></td>
</tr>
<tr>
<td>Threes</td>
<td>Sum of all the threes</td>
<td class="score threeScore"></td>
</tr>
<tr>
<td>Fours</td>
<td>Sum of all the fours</td>
<td class="score fourScore"></td>
</tr>
<tr>
<td>Fives</td>
<td>Sum of all the fives</td>
<td class="score fiveScore"></td>
</tr>
<tr>
<td>Sixes</td>
<td>Sum of all the sixes</td>
<td class="score sixScore"></td>
</tr>
<tr>
<td colspan ='2'>Total</td>
<td class="totalScore"></td>
</tr>
<tr>
<td>Bonus</td>
<td>Score 35 </td>
<td class="bonus"></td>
</tr>
<tr>
<td colspan ='2'>Upper Total</td>
<td class="upperScore"></td>
</tr>
<tr>
<th colspan="3">Lower Section</th>
</tr>
<tr>
<td>3 of a Kind</td>
<td>SUm of all dice</td>
<td class="three_of_kind"></td>
</tr>
<tr>
<td>4 of a kind</td>
<td>Sum of all dice</td>
<td class="four_of_kind"></td>
</tr>
<tr>
<td>Full House</td>
<td>Score 35</td>
<td class="fullhouse"></td>
</tr>
<tr>
<td>sm. straight</td>
<td>Score 30</td>
<td class="sm"></td>
</tr>
<tr>
<td>lg. Straight</td>
<td>score 40</td>
<td class="lg"></td>
</tr>
<tr>
<td>Yahtzee</td>
<td>Score yatzee</td>
<td class="yatzee"></td>
</tr>
<tr>
<td>Chance</td>
<td>sum of all dice</td>
<td class="chance"></td>
</tr>
<tr>
<td colspan ='2'>Lower Total</td>
<td class="lowerScore"></td>
</tr>
<tr>
<td colspan ='2'>Upper Total</td>
<td class="UpperScore"></td>
</tr>
<tr>
<td colspan ='2'>Combined Total</td>
<td class="combinedScore"></td>
</tr>
<section class="dice">
<div class="die die1"></div>
<div class="die die2"></div>
<div class="die die3"></div>
<div class="die die4"></div>
<div class="die die5"></div>
</section>
<button class="button">ROll</button>
</table>
</div> <!-- board div -->
</body>
</html>
|
|
|
|
|
You just need to reset all the counters to zero before each throw.
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
