I have been trying out different methods of how to load an image, I was trying to load the image from a web address but instead of loading the image its just loading the link to the address? I have updated the code which is below (just the sections for loading the cards) however it still only loads the link not the image? Can anyone see where i am going wrong?
card js (there are more cards than 2 but for this example I only added two)
GABIH20.cards = (function(){
var public_stuff = {};
var cards = [
{name: "Gabi H20", energy: 90, saving: 99, eco: 98, ease: 89, image: 'http://www.lessons4living.com/images/penclchk.gif'},
{name: "Sherlock H20lmes", energy: 30, saving: 70, eco: 35, ease: 60, image:'http://www.sherlock.com/images/penclchk.gif'},
];
var shuffle = function(v){
//This is just random code I plucked from the Internet. Seems to work for this purpose.
for(var j, x, i = v.length; i; j = parseInt(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x);
return v;
}
public_stuff.get_cards = function() {return cards;}
public_stuff.deal_hands = function() {
var half_way_point = cards.length / 2;
var shuffled_deck = shuffle(cards);
return [cards.slice(0, half_way_point), cards.slice(half_way_point)];
}
return public_stuff;
}());
event js
GABIH20 = {};
GABIH20.game = (function(){
var num_rounds_played_in_this_game = 0;
var playing_game = false;
var player, opponent, player_name;
var public_stuff = {};
public_stuff.current_view = "#menu_view";
var populate_card_view = function(player) {
var card = player.get_current_card();
$("header .distro_name").html(card.name);
$(".attr_image .attr_imgvalue").html(card.image);
$(".attr_energy .attr_value").html(card.energy);
$(".attr_saving .attr_value").html(card.saving);
$(".attr_eco .attr_value").html(card.eco);
$(".attr_ease .attr_value").html(card.ease);
}
public_stuff.playing_game = function() {
return playing_game;
}
public_stuff.get_player_name = function() {
return player_name;
}
HTML
<div id="card_view" class="app_view">
<header>
<p>You drew the <span class="distro_name">Ubuntu</span> card</p>
</header>
<div class="distro_info">
<table class="distro_attributes">
<tr class="distro_attribute attr_image">
<td class="attr_imgvalue"><img src="" class="card_image" /></td>
</tr>
</table>
</div>
<p><strong>Now choose an attribute to battle with!</strong></p>
<table class="distro_attributes">
<tr class="distro_attribute attr_energy">
<td class="attr_name">Energy</td>
<td class="attr_value">100</td>
</tr>
<tr class="distro_attribute attr_saving">
<td class="attr_name">Saving</td>
<td class="attr_value">100</td>
</tr>
<tr class="distro_attribute attr_eco">
<td class="attr_name">Eco</td>
<td class="attr_value">100</td>
</tr>
<tr class="distro_attribute attr_ease">
<td class="attr_name">Ease</td>
<td class="attr_value">100</td>
</tr>
</table></div>
Change the line,
$(".attr_image .attr_imgvalue").html(card.image);
to
$(".attr_image .attr_imgvalue img").attr('src',card.image); // add link to img src
Related
I am new to Angularjs,
and do not know how to accomplish this.
I would like to add color to the member with the biggest Score, Missed, field Goal percentage.
is this possible?
is there a way to change the color of value to green of the member with the largest value of each column.
like this:(desired result)
this is my html code :
<body ng-app="myApp" ng-controller="myCtrl">
<table border="2">
<tr>
<th>Members</th>
<th>Score</th>
<th>Missed</th>
<th>FG%</th>
</tr>
<tr ng-repeat="member in members">
<td>{{member.name}}</td>
<td>{{getScore(member.shotMade)}}</td>
<td>{{getMissed(member.shotMade, member.shotAttemp)}}</td>
<td>{{getFG(member.shotMade, member.shotAttemp)}}</td>
</tr>
</table>
this is my javascript code:
const app = angular.module('myApp', []);
app.controller('myCtrl', function($scope){
$scope.test = "success";
$scope.members =
[
{name:'Kobe', shotMade:23, shotAttemp:44},
{name:'lebron', shotMade:21, shotAttemp:33},
{name:'Jordan', shotMade:32, shotAttemp:43},
{name:'Hakeem', shotMade:20, shotAttemp:21},
]
$scope.getScore = (made)=> made * 2;
$scope.getMissed = (made, attemp) => attemp - made;
$scope.getFG = (made, attemp) => (made / attemp) * 10000;
});
is there a way to do this with angularjs or Javascript?
angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.members = [
{ name: 'Kobe', shotMade: 23, shotAttemp: 44 },
{ name: 'lebron', shotMade: 21, shotAttemp: 33 },
{ name: 'Jordan', shotMade: 32, shotAttemp: 43 },
{ name: 'Hakeem', shotMade: 20, shotAttemp: 21 }
]
var getScore = (made) => made * 2;
var getMissed = (made, attemp) => attemp - made;
var getFG = (made, attemp) => (made / attemp) * 10000;
$scope.maxScore = 0;
$scope.maxMissed = 0;
$scope.maxFG = 0;
for (var member of $scope.members) {
member.score = getScore(member.shotMade);
if (member.score > $scope.maxScore)
$scope.maxScore = member.score;
member.missed = getMissed(member.shotMade, member.shotAttemp);
if (member.missed > $scope.maxMissed)
$scope.maxMissed = member.missed;
member.fg = getFG(member.shotMade, member.shotAttemp);
if (member.fg > $scope.maxFG)
$scope.maxFG = member.fg;
}
});
.maxGreen {
color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js">
</script>
<body ng-app="myApp" ng-controller="myCtrl">
<table border="2">
<tr>
<th>Members</th>
<th>Score</th>
<th>Missed</th>
<th>FG%</th>
</tr>
<tr ng-repeat="member in members">
<td>{{member.name}}</td>
<td ng-class='{maxGreen: member.score == maxScore}'>{{member.score}}</td>
<td ng-class='{maxGreen: member.missed == maxMissed }'>{{member.missed}}</td>
<td ng-class='{maxGreen: member.fg == maxFG}'>{{member.fg}}</td>
</tr>
</table>
How can I get the highest value in a table column by class? I have tried the following:
HTML
<table>
<tr><td class="speed">1.1</td></tr>
<tr><td class="speed">3.1</td></tr>
<tr><td class="speed">5.5</td></tr>
<tr><td class="speed">2.0</td></tr>
</table>
jQuery/Javascript
function gethighestspeeds(){
var speeds = $(".speed").map(function() {
return parseFloat(this.text, 10);
}).get();
var highestspeed = Math.max.apply(Math, speeds);
alert(highestspeed)
}
Also, how can I get all values if > than a certain number?
this.text is undefined for the td element, you need to parse parseFloat($(this).text(), 10);
function gethighestspeeds() {
var speeds = $(".speed").map(function() {
return parseFloat($(this).text(), 10);
}).get();
var highestspeed = Math.max.apply(Math, speeds);
snippet.log('high: ' + highestspeed);
var num = 2.3;
var array = $(".speed").map(function() {
var flt = parseFloat($(this).text(), 10);
return flt > num ? flt : undefined;
}).get();
snippet.log('array: ' + array)
//if you already have the speeds array
var array2 = speeds.filter(function(val) {
return num < val;
});
snippet.log('array2: ' + array)
}
gethighestspeeds();
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="speed">1.1</td>
</tr>
<tr>
<td class="speed">3.1</td>
</tr>
<tr>
<td class="speed">5.5</td>
</tr>
<tr>
<td class="speed">2.0</td>
</tr>
</table>
Try this........
var certainNumber=2.2; //Whatever you want to set
function gethighestspeeds(){
var speeds = $(".speed").map(function() {
return parseFloat(this.text, 10) > parseFloat(certainNumber);
}).get();
}
You have to use : $(this).text() instead of this.text in your map function:
return parseFloat($(this).text(), 10);
I am creating a dice game. I am trying to make it so the user can re-click a button after the loop as gone through to reset the page to play again. My gut tells me an if statement is involved but after several attempts I cannot figure out how to set it up.
I was able to change the button value to show "play again" after pressed, I just need to get the page to reload after the user re-presses the button "play again." Any help would be appreciated thanks.
<script>
var rolls = new Array();
var maxMoney = 0;
var rollCountMoney = new Array();
var count = 0;
var startingBet = 0;
var betStarter = new Array();
var mostRoll = 0;
function rollDice() {
do {
count++;
var userInput = parseInt(document.getElementById("bet").value);
var wallet = userInput;
var d1 = Math.floor(Math.random() * 6) + 1;
var d2 = Math.floor(Math.random() * 6) + 1;
var diceTotal = d1 + d2;
rolls.push(diceTotal);
rollCountMoney.push(wallet);
if(wallet > maxMoney){
maxMoney = wallet;
mostRoll = count - 1;
}
if(userInput > startingBet){
betStarter.push(userInput);
}
if (diceTotal === 7) {
document.getElementById("bet").value = wallet += 4;
console.log("Round: " + count + " ,you rolled a " + diceTotal + "! You win $4 for a total of: " +wallet);
} else {
document.getElementById("bet").value = wallet -= 1;
console.log("Round: " + count + " ,you rolled a " + diceTotal + "! You lose $1 for a total of: " +wallet);
}
} while (wallet > 0) {}
var displayMsg = count;
var highest = maxMoney;
var highestRoll = mostRoll;
document.getElementById("display").innerHTML = displayMsg;
document.getElementById("starter").innerHTML = betStarter[0];
document.getElementById("highPot").innerHTML = highest;
document.getElementById("rollPot").innerHTML = highestRoll;
var elem = document.getElementById("playAgain");
if (elem.value=="Play Again"){
elem.value = "Play";
}else {elem.value = "Play Again";
}
}
</script>
</head>
<body>
<div class="container-fluid">
<div class="page-head">
<h1 align="center">Lucky Sevens</h1>
</div>
</div>
<div class="container" align="center">
<table class="table-responsive">
<tr>
<th><h3 align="center"><b>Lucky Sevens</b></h3></th>
</tr>
<tr>
<td>
<form>
Starting Bet:
<input id="bet" type="text"/>
</form>
</td>
</tr>
<tr>
<td align="center">
<form>
<input type="button" id="playAgain" onclick="rollDice()" value="Play"></input>
</form>
</td>
</tr>
</table>
<div class="jumbotron" style="width:400px; position: relative; top: 40px">
<table class="dicey" border="1" style="border-color: white">
<caption ALIGN="top">
<h3 align="center" style="color: black"><b><u>Results</u></b></h3>
</caption>
<tr>
<th style= "background-color: grey"><b>Starting Bet</b></th>
<th style= "background-color: grey" id="starter"></th>
</tr>
<tr>
<td>Total rolls before going broke </td>
<td id="display"></td>
</tr>
<tr>
<td>Highest amount won </td>
<td id="highPot"></td>
</tr>
<tr>
<td>Roll count at highest amount won </td>
<td id="rollPot"></td>
</tr>
</table>
</div>
</div>
If I understood your code correctly, you can either reload the page:
function rollDice(){
if (document.getElementById("playAgain").value=="Play Again")
location.reload();
...
or reset it to the initial state:
function rollDice() {
var rolls = new Array();
var maxMoney = 0;
var rollCountMoney = new Array();
var count = 0;
var startingBet = 0;
var betStarter = new Array();
var mostRoll = 0;
document.getElementById("display").innerHTML = "";
document.getElementById("starter").innerHTML = "";
document.getElementById("highPot").innerHTML = "";
document.getElementById("rollPot").innerHTML = "";
...
The simplest way would be to add a second button for play again like
<button id="play-again-button" style="display:none" onclick="location.reload()">play again</button >
Then show it when you need to via
document.getElementById("play-again-button').style.display = "block";
If you want to actually refresh the page. Or tie that button's onclick to a js function that resets things.
Hi I have a simple row that I am trying to display the total of.
In my html I have
<tr ng-repeat="item in items">
<td>{{item.name}}</td>
<td ng-init="iTotal= iTotal + item.price">{{item.price}}</td>
</tr>
<tr>
<td></td>
<td>Total :</td>
<td>Total:{{iTotal}}</td>
</tr>
In my controller I have
var vm=this;
vm.Itotal=0;
This basically doesn't gives me blank for iTotal no error.
Please let me know how to fix it to get the result. Thanks
If you are using view model annotation:
var vm=this;
vm.Itotal=0;
Then you should access vm.Itotal like this:
<td ng-init="controller.Itotal = controller.Itotal + item.price">{{item.price}}</td>
Pay attention that you use iTotal in your view and Itotal (I in uppercase) in your controller.
You can try this simple way:
Demo plunker
HTML:
<table>
<tr ng-repeat="item in items">
<td>{{item.name}}</td>
<td >{{item.price}}</td>
</tr>
<tr>
<td></td>
<td>Total:{{iTotal}}</td>
</tr>
</table>
JS:
$scope.items=[{
"id": 1,
"price": 12,
},
{
"id": 1,
"price": 1,
}];
$scope.iTotal=0;
$scope.items.forEach(function(i){
$scope.iTotal= $scope.iTotal + i.price;
})
JSFiddle explaining the same: (Not created by me, Copied from JSFiddle)
http://jsfiddle.net/J9Aj8/
angular.module("app", []).
filter("sum", function sum$$factory() {
return function sum$$filter(collection) {
var sum = 0;
_.forOwn(collection, function(value) {
switch (typeof value) {
case 'number': sum += value; break;
case 'string': sum += (value >>> 0); break;
default: // don't know what to do with this, maybe something else!
break;
}
});
return sum;
};
}).
controller("itemsCtrl", function() {
var self = this;
this.model = {};
this.numbers = [
36,
72,
80,
101,
9,
42
];
this.addNumber = function() {
var value = self.model.newNumber;
if (value === value && typeof value === 'number') {
self.numbers.push(value);
self.model.newNumber = NaN;
}
};
});
So I have the following HTML table on my site
<div class="timecard">
<table>
<tr class = "display-even-row">
<td align="left" style="color:#000099">In</td>
<td align="left" class="job_code">2400-Duffy's</td>
<td align="left" class="hrs">00:04</td>
</tr>
<tr class = "display-odd-row">
<td align="left" style="color:#009900">In</td>
<td align="left" class="job_code">1500-Orchard</td>
<td align="left" class="hrs">01:00</td>
</tr>
<tr class = "display-even-row">
<td align="left" style="color:#000099">In</td>
<td align="left" class="job_code">32-Black</td>
<td align="left" class="hrs">10:00</td>
</tr>
<tr class = "display-odd-row">
<td align="left" style="color:#009900">In</td>
<td align="left" class="job_code">1500-Orchard</td>
<td align="left" class="hrs">4</td>
</tr>
</table>
</div>
<div id="total">
</div>
And I have the following jquery script to calculate the total hours of each individual job code. It is designed dynamically to allow for more job codes to be added later. However, it is not adding up hours properly, but not displaying if a job has minutes.
$(document).ready(function(){
var timeString = $(this).next('td.hrs').text();
var components = timeString.split(':');
var seconds = components[1] ? parseInt(components[1], 10) : 0;
var hrs = parseInt(components[0], 10) + seconds / 60;
total += hrs;
var temp = [];
$('.job_code').each(function(index, element){
var text = $(this).text();
temp.push(text);
});
// remove duplicates
var job_code = [];
$.each(temp, function(index, element){
if($.inArray(element, job_code) === -1) job_code.push(element);
});
var sum = {};
$.each(job_code, function(index, element){
var total = 0;
$('.job_code:contains('+element+')').each(function(key, value){
total += parseInt($(this).next('td.hrs').text());
sum[index] = {'job_code' : element, 'total': total};
});
});
console.log(sum);
$.each(sum, function(index, element){
$('#total').append('<p>Total for '+element.job_code+': '+element.total+'</p>');
});
});
Any thoughts on what changes need to be made to make this work with 00:00 instead of just whole integers? Thanks in advance.
Short of using a date/time parsing library, you'll probably want to extract the integer strings on either side of the colon before you attempt to parse them.
var timeString = $(this).next('td.hrs').text();
var components = timeString.split(':');
var seconds = components[1] ? parseInt(components[1], 10) : 0;
var hrs = parseInt(components[0], 10) + seconds / 60;
total += hrs;
You could also use a regular expression to do this, but the split should work just fine.