Html
<button id = 'roll'>roll all</button>
<img class = 'die' src="one.jpg" name ="first">
<img class = 'die'src="two.jpg" name ="second">
<img class = 'die' src="three.jpg" name ="third">
<img class = 'die' src="energy.jpg" name ="fourth">
<img class = 'die' src="hit.jpg" name ="fifth">
<img class = 'die' src="heal.jpg" name ="last">
<button id='turns'>next turn</button>
<div id='players'>
<div id ='player1'>
<p>reptar</p>
<p id='token1'>p1</p>
<p class ='health' name ='p1H'> health <span id = 'p1Health'>10</span></p>
<p class ='points' name ='p1P'> point <span id = 'p1Points'>0</span></p>
<p class ='energy' name ='p1E'> energy <span id = 'p1Energy'>0</span></p>
</div>
<div id ='player2'>
<p>Chtulu</p>
<p id='token2'>p2</p>
<p class ='health' name ='p2H'> health <span id = 'p2Health'>10</span></p>
<p class ='points' name ='p2P'> point <span id = 'p2Points'>0</span></p>
<p class ='energy' name ='p2'> energy <span id = 'p2PEnergy'>0</span></p>
</div>
</div>
Jquery
$(function () {
var counter =0;
var currentPlayer = [$("player1"),$("player2")]
var store=[];
var overflow=3;
var value=[0,0,0,0,0,0];
var names=[ "one","two","three","energy","hit","heal"]
var pointOne=0;
var pointTwo=0;
var pointThree=0
var dice = $('.die').map(function () {
return $(this).attr('src')
}).get();
//Roll all
$('#roll').click(function () {
//store dice value num into store[0]
var num = Math.floor(Math.random() * dice.length);
$('.die[name=first]').attr('src', dice[num]);
store[0] = dice[num];
//store dice value num into store[1]
num = Math.floor(Math.random() * dice.length);
$('.die[name=second]').attr('src', dice[num]);
store[1] = dice[num];
//store dice value num into store[2]
num = Math.floor(Math.random() * dice.length);
$('.die[name=third]').attr('src', dice[num]);
store[2] = dice[num];
//store dice value num into store[3]
num = Math.floor(Math.random() * dice.length);
$('.die[name=fourth]').attr('src', dice[num]);
store[3] = dice[num];
//store dice value num into store[4]
num = Math.floor(Math.random() * dice.length);
$('.die[name=fifth]').attr('src', dice[num]);
store[4] = dice[num];
//store dice value num into store[5]
num = Math.floor(Math.random() * dice.length);
$('.die[name=last]').attr('src', dice[num]);
store[5] = dice[num];
});
$('#turns').click(function ()
{
pointOne=0;
pointTwo=0;
pointThree=0
value=[0,0,0,0,0,0];
for (num =0; num<store.length; num++)
{
//Count how many times for one
if (store[num]=='one.jpg'){
if(value[0]<2){
value[0]+=1;
}else if(value[0]==2){
pointOne +=1;
value[0]+=1;
}else if (value[0]>2){
overflow+=1;
pointOne=1+(overflow%3);
if(overflow%3==0){
pointOne=3
}
}
}
//Count how many times for two
if (store[num]=='two.jpg'){
if(value[1]<2){
value[1]+=1;
}else if(value[1]==2){
pointTwo +=2;
value[1]+=1;
}else if (value[1]>2){
overflow+=1;
pointTwo=2+(overflow%3);
if(overflow%3==0){
pointTwo=5
}
value[1]+=1;
}
}
//Count how many times for three
if (store[num]=='three.jpg'){
if(value[2]<2){
value[2]+=1;
}else if(value[2]==2){
pointThree +=3;
value[2]+=1;
}else if (value[2] >2){
overflow+=1;
pointThree=3+(overflow%3);
if (overflow%3==0){
pointThree=6
}
}
}
//Count how many times for energy
if (store[num]=='energy.jpg'){
value[3]+=1;
}
//Count how many times for hits
if (store[num]=='hit.jpg'){
value[4]+=1;
}
//Count how many times for heals
if (store[num]=='heal.jpg')
{
value[5]+=1;
}
}
if(pointOne >0){
value[0] = pointOne;
}
if(pointTwo >0){
value[1] = pointTwo;
}
if(pointThree >0){
value[2] = pointThree
pointThree=0;
}
});
});
Right now all it does is able to score up the points and add the total amount for the last three dice what I want to do is be able to change the span of a player based on the dice rolls. thank you for your time
Span does not have value attribute, so you can not change its value, however you can change the innerhtml of span.
please run the example given below in your local you will get idea, what i am trying to say.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("span").html("Hello <b>world!</b>");
});
});
</script>
</head>
<body>
<button>Change content of span elements</button>
<span>This is a paragraph.</span>
</body>
</html>
Thanks Amit
$('#yourSpan').html('new value');
只需尝试使用需要更改的特定span
ID。
$("#p1Health").text("5");
You're looking to use the Jquery .html() method.
$(selector).html(value);
This is going to change the contents inside the spans to the values you're trying to get, so for player one you'd go:
$("#p1Health").html(health); //Setting the health span to the health value
$("#p1Points").html(points); //Setting the points span to the points value
$("#p1Energy").html(energy); //Setting the energy span to the energy value
Sorry to not be more specific, let me know if this helps.
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.