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
现在它只能得分并加上最后三个骰子的总量我想要做的就是能够根据掷骰子改变一个玩家的跨度。感谢您的时间
4 个解决方案
#1
2
Span does not have value attribute, so you can not change its value, however you can change the innerhtml of span.
Span没有value属性,因此您无法更改其值,但您可以更改span的innerhtml。
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
#2
0
$('#yourSpan').html('new value');
#3
0
Simply try with specific span id, which you need to change.
只需尝试使用您需要更改的特定跨度ID。
$("#p1Health").text("5");
#4
0
You're looking to use the Jquery .html() method.
您正在寻找使用Jquery .html()方法。
$(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:
这会将跨度内的内容更改为您尝试获取的值,因此对于玩家1,您将去:
$("#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.
对不起,请不要更具体,请告诉我这是否有帮助。
#1
2
Span does not have value attribute, so you can not change its value, however you can change the innerhtml of span.
Span没有value属性,因此您无法更改其值,但您可以更改span的innerhtml。
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
#2
0
$('#yourSpan').html('new value');
#3
0
Simply try with specific span id, which you need to change.
只需尝试使用您需要更改的特定跨度ID。
$("#p1Health").text("5");
#4
0
You're looking to use the Jquery .html() method.
您正在寻找使用Jquery .html()方法。
$(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:
这会将跨度内的内容更改为您尝试获取的值,因此对于玩家1,您将去:
$("#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.
对不起,请不要更具体,请告诉我这是否有帮助。