We Keep Coding

How can I rewrite innerHTML everytime function is called javascript

function he() {
var x = Math.floor((Math.random() * 100) + 1);
document.getElementById("res1").innerHTML = "Heroes have dealt " + x + " damage on villains.";
var vhp = villains - x;
document.getElementById("res2").innerHTML = "<br/>Villains have " + vhp + " hp left.";
vok();
}
function vok() {
var y = Math.floor((Math.random() * 100) + 1);
document.getElementById("res3").innerHTML = "<br/>Villains have dealt " + y + " damage on Heroes.";
var hhp = hero - y;
document.getElementById("res4").innerHTML = "<br/>Heroes have " + hhp + " hp left.";
he();
}
Here is the above code I made function he() is called when a button is clicked and vok function is called after execution of he() function but it's not going good currently i want to overwrite the innerHTML every time the function is runned how am I supposed to do so?

How to create a loop that asks a new random addition question after answering the previous question

I am working on creating a small 5 question addition quiz that asks the user a new random addition question every time they answer the previous one. I would like to be able to have my script ask a new question every time the user clicks on the "check answer" button without having to refresh the page. Then, once the user has completed the 5 questions, I would like to be able to have a popup state they have completed the quiz and can refresh the page to start a new quiz. With my current code, the script asks a random addition question, and then once the user clicks on the "check answer" button, the user must refresh the page to get a new question. I am stuck on figuring out how to modify my current code to fit what I am trying to do. I am thinking that a while loop may be they way to go, but I don't really know how to implement it. The code that I have so far is: `
<h1>Addition Quiz!</h1>
<p>This short 5 question quiz will test your addition skills! Answer the question as the computer asks it and pat yourself on the back for each correct answer!</p>
<h3 id="mathquestion"></h3>
<input type="text" name="answerbox" id="answerbox">
<button onclick="addition()">Check Answer</button>
<script>
var minimum = 1;
var maximum = 9;
var intiger1 = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
var intiger2 = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
document.getElementById("mathquestion").innerHTML = intiger1 + " " + "+" + " " + intiger2;
var questionanswer = intiger1 + intiger2;
function addition() {
var useranswer = document.getElementById('answerbox').value;
if (useranswer == questionanswer) {
alert("Correct! Congrats!");
} else {
alert("Sorry, your answer is incorrect. Better luck with the next question!")
}
}
</script>`

So what you want is the part that setups your question into a new function. And run that function when the answer is right. An example:
<script>
var minimum = 1;
var maximum = 9;
var questionanswer = 0;
setupQuestion();
function setupQuestion(){
var intiger1 = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
var intiger2 = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
document.getElementById("mathquestion").innerHTML = intiger1 + " " + "+" + " " + intiger2;
questionanswer = intiger1 + intiger2;
}
function addition() {
var useranswer = document.getElementById('answerbox').value;
if (useranswer == questionanswer) {
alert("Correct! Congrats!");
setupQuestion();
} else {
alert("Sorry, your answer is incorrect. Better luck with the next question!")
}
}
</script>`

Just update the variable
<script>
var minimum = 1;
var maximum = 9;
var intiger1 = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
var intiger2 = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
document.getElementById("mathquestion").innerHTML = intiger1 + " " + "+" + " " + intiger2;
var questionanswer = intiger1 + intiger2;
function addition() {
var useranswer = document.getElementById('answerbox').value;
if (useranswer == questionanswer) {
alert("Correct! Congrats!");
} else {
alert("Sorry, your answer is incorrect. Better luck with the next question!")
}
// Updating question
intiger1 = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
intiger2 = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
document.getElementById("mathquestion").innerHTML = intiger1 + " " + "+" + " " + intiger2;
}
</script>

Reduce resource usage of this JS program?

I wrote the following JS program, which i'm running from the command line using node.
//step one: create an array of remaining creatures
var remainingCreatures = [];
//some config variables:
var amt = 1000; //amount of creatues generated
var maxhlt = 1000; //max value for creature health stat
var minhlt = 100; //min value for creature health stat
var maxatk = 100; //max value for creature attack stat
var minatk = 1; //min value for creature attack stat
function remove(target) { //helper function to easily remove creatues from the array
var index = remainingCreatures.indexOf(target);
if (index > -1) {
remainingCreatures.splice(index, 1);
}
}
//generate creatures
//each creature has an Attack, Health, and Aggressiveness , as well as Instabillity, the average of the three
//A creature's Instabillity is added to the attack points of its opponent in fights.
for (var i = 0; i < amt; i++) {
var atkVal = Math.floor((Math.random() * maxatk) + minatk);
var hltVal = Math.floor((Math.random() * maxhlt) + minhlt);
var insVal = (atkVal + hltVal) / 2;
remainingCreatures[i] = {num: i, atk: atkVal, hlt: hltVal, ins: insVal, fts: 0, ihlt: hltVal};
}
console.log(amt + " creatues generated, starting melee...");
function fight(cr1, cr2) { //function to handle fighting, randomly creates creature pairs and has them fight
function attack(a, b) {
console.log("[ROUND 1] Creature 1 (#" + a.num + ") is attacking first.");
b.hlt = b.hlt - (a.atk + b.ins);
console.log("[HIT] Creature #" + b.num + " health reduced to " + b.hlt);
if (b.hlt <= 0) {
console.log("[DEATH] Creature #" + b.num + " Eliminated");
remove(b);
} else {
console.log("[ROUND 2] Creature 2 (#" + b.num + ") is attacking second.");
a.hlt = a.hlt - (b.atk + a.ins);
console.log("[HIT] Creature #" + a.num + " health reduced to " + a.hlt);
if (a.hlt <= 0) {
console.log("[DEATH] Creature #" + a.num + " Eliminated");
remove(a);
}
}
}
console.log("[FIGHT] Pair generated: Creature #" + cr1.num + " and Creature #" + cr2.num);
cr1.fts++;
cr2.fts++;
if (cr1.ins <= cr2.ins) {
attack(cr1, cr2);
} else {
attack(cr2, cr1);
}
}
for(;true;) {
if(remainingCreatures.length == 1) break;
fight(remainingCreatures[Math.floor(Math.random() * remainingCreatures.length)], remainingCreatures[Math.floor(Math.random() * remainingCreatures.length)]);
}
console.log(" ");
console.log("[WIN] Creature #" + remainingCreatures[0].num + " has won!");
console.log("Starting array size was " + amt + " creatures")
console.log(remainingCreatures[0]);
For some reason, this starts to slow down and eventually choke when amt is set to really big numbers, like one million. For reference, that's the number of objects that will be generated and added to an array - as you can probably see in the code, this array gets looped through a lot. But even with one million objects, each object is only around 80 bytes, maximum. And the calculations this program is doing are very basic.
So my question is: why is running this program so resource intensive, and how can I fix or mitigate it without changing the function of the program too drastically?

First of all, a million of anything will take a toll on performance, no matter how small.
The other issue is that your design is inherently inefficient.
Look at your remove() function. It first finds the index of the element, then removes it. If you have one million elements in that array, on average, it will need to compare the passed value with 500,000 elements just to find it before it can remove. There's one easy way to fix this; pass indices directly rather than using .indexOf.
function fight(ind1, ind2) { //function to handle fighting, randomly creates creature pairs and has them fight
var cr1 = remainingCreatures[ind1];
var cr2 = remainingCreatures[ind2];
function attack(a, b) {
console.log("[ROUND 1] Creature 1 (#" + a.num + ") is attacking first.");
b.hlt = b.hlt - (a.atk + b.ins);
console.log("[HIT] Creature #" + b.num + " health reduced to " + b.hlt);
if (b.hlt <= 0) {
console.log("[DEATH] Creature #" + b.num + " Eliminated");
remove(ind2);
} else {
console.log("[ROUND 2] Creature 2 (#" + b.num + ") is attacking second.");
a.hlt = a.hlt - (b.atk + a.ins);
console.log("[HIT] Creature #" + a.num + " health reduced to " + a.hlt);
if (a.hlt <= 0) {
console.log("[DEATH] Creature #" + a.num + " Eliminated");
remove(ind1);
}
}
}
console.log("[FIGHT] Pair generated: Creature #" + cr1.num + " and Creature #" + cr2.num);
cr1.fts++;
cr2.fts++;
if (cr1.ins <= cr2.ins) {
attack(cr1, cr2);
} else {
attack(cr2, cr1);
}
}
for(;true;) {
if(remainingCreatures.length == 1) break;
fight(Math.floor(Math.random() * remainingCreatures.length), Math.floor(Math.random() * remainingCreatures.length));
}
There aren't many other ways to easily improve performance, but that alone should be enough. To make your code more readable, though, consider replacing this:
for(;true;) {
if(remainingCreatures.length == 1) break;
fight(Math.floor(Math.random() * remainingCreatures.length), Math.floor(Math.random() * remainingCreatures.length));
}
with this:
// Consider using === and !== as best practice, but not necessary here
while (remainingCreatures.length != 1)
fight(Math.floor(Math.random() * remainingCreatures.length), Math.floor(Math.random() * remainingCreatures.length));
(See this link for info on that comment.)

how do i get a new number to generate

i need to make a dice rolling program that rolls dice and says who won if it is a tie it rolls again and after each win you earn a point first to 5 wins the game whenever i run mine it uses the same numbers over and over again because it only generated the once how can i fix this and what else do i need to do after this issue to finish the program, thanks for the help!
<script>
var comp1 = Math.floor((Math.random()*6) + 1);
var comp2 = Math.floor((Math.random()*6) + 1);
var you1 = Math.floor((Math.random()*6) + 1);
var you2 = Math.floor((Math.random()*6) + 1);
var counter = 1;
var youPoints = 0;
var mePoints = 0;
while(counter < 6)
{{
alert("Let's shake some dice!")
alert("your turn to roll \n\n you shook a " + you1 + " and a " + you2 + ", so you have " + (you1 + you2));
alert("my turn to roll \n\n I shook a " + comp1 + " and a " + comp2 + ", so I have " + (comp1 + comp2));
counter++
var you = you1 + you2;
var me = comp1 + comp2;
if(you > me)
{
alert("you win " + you + " to " + me);
youPoints++
}
if (me > you)
{
alert("I win " + me + " to " + you);
mePoints++
}
}}
</script>

You're initializing your random variables (you1, you2) outside the while loop.
It's being initialized only once and hence producing the same number every time.
Bring it inside the loop, and that might fix it!

Move the code the generates the random numbers to inside of the loop because, right now, they only generate once... before the loop even starts.
Also, do yourself a favor and use a for counting loop, rather than a while, because while loops are easily misconfigured to cause infinite loops to occur.
var youPoints = 0;
var mePoints = 0;
for(var counter = 1; counter < 6; counter++){
// The code that generates the random numbers has to be in the loop
// in order for new randoms to be generated upon each loop iteration
var comp1 = Math.floor((Math.random()*6) + 1);
var comp2 = Math.floor((Math.random()*6) + 1);
var you1 = Math.floor((Math.random()*6) + 1);
var you2 = Math.floor((Math.random()*6) + 1);
alert("Let's shake some dice!")
alert("your turn to roll \n\n you shook a " + you1 + " and a " + you2 + ", so you have " + (you1 + you2));
alert("my turn to roll \n\n I shook a " + comp1 + " and a " + comp2 + ", so I have " + (comp1 + comp2));
var you = you1 + you2;
var me = comp1 + comp2;
// Don't make two separate if statements. Use one with an else if
if(you > me) {
alert("you win " + you + " to " + me);
youPoints++
} else if (me > you) {
alert("I win " + me + " to " + you);
mePoints++
}
}

Here you go, this should be a complete working example.
Note: I replaced alert() for console.log() so we can see the output here in the console and without popups, but it will work either way.
var compPoints = 0;
var youPoints = 0;
var winnerOfFive = false;
function rollTheDice() {
return Math.floor((Math.random()*6) + 1);
}
function rollAllDice() {
let you1 = rollTheDice();
let you2 = rollTheDice();
let comp1 = rollTheDice();
let comp2 = rollTheDice();
console.log("your turn to roll \n\n you shook a " + you1 + " and a " + you2 + ", so you have " + (you1 + you2));
console.log("my turn to roll \n\n I shook a " + comp1 + " and a " + comp2 + ", so I have " + (comp1 + comp2));
var you = you1 + you2;
var me = comp1 + comp2;
if(you > me) {
console.log("you win " + you + " to " + me);
youPoints++;
} else if(me > you) {
console.log("I win " + me + " to " + you);
compPoints++;
} else {
console.log("It was a tie, no one wins. Re-rolling...");
rollAllDice();
}
}
function startGame() {
while( !winnerOfFive ) {
console.log("Let's shake some dice!")
rollAllDice();
if(compPoints == 5) {
console.log("Comp is first to 5 games and wins " + compPoints + " to " + youPoints);
winnerOfFive = true;
} else if (youPoints == 5) {
console.log("You are first to 5 games and win " + youPoints + " to " + compPoints);
winnerOfFive = true;
}
}
}
// Start the game like this
startGame();

Trying to make loop exit , but it currently just continues looping for 100 times

I am trying to make so when the looping of 100 hits on the character exits the loop when the life dice rolls to 0. How it currently is is all gets looped 100 times. I am not quite sure how I need to go about solving this, any tips would be helpful. My code is below.
function addChar(fname, lname, speed, agility, wep, outfit, mood) {
this.fname = fname;
this.lname = lname;
this.speed = speed;
this.agility = agility;
this.wep = wep;
this.outfit = outfit;
this.mood = mood;
this.special = function(specialMove) {
specialMove();
}
this.jumpKick = function() {
var jmpkckTimes = Math.floor(Math.random() * (100 - 33 + 1)) + 33;
document.write("He jumpkicks " + jmpkckTimes + " times. ");
if (jmpkckTimes > 70) {
document.write("He enters rage mode! ");
} else {
document.write("He does not have enough kicks for rage mode. ");
}
}
this.hits = function() {
var allHits = Math.floor(Math.random() * (100 - 33 + 1)) + 33;
document.write(" He gets attacked for " + allHits + " HP.");
}
this.lifes = function() {
var life = Math.floor(Math.random() * (3 - 0 + 1)) + 0;
if (life > 0) {
document.write(" The life dice rolls a " + life + ". You have survived! For now...");
} else {
document.write(" The life dice rolls a " + life + ". You have died!");
}
}
}
var myChar = new addChar('Johhny', 'Kicker', 10, 7, 'Ancient Greataxe', 'Barrows', 'angry');
document.write(myChar.fname + " " + myChar.lname + "'s speed is " + myChar.speed + "<br>");
document.write(myChar.fname + " " + myChar.lname + "'s agility is " + myChar.agility + "<br>");
document.write(myChar.fname + " " + myChar.lname + "'s weapon of choice is: " + myChar.wep + "<br>");
document.write(myChar.fname + " " + myChar.lname + " feels " + myChar.mood + "<br>");
document.write(myChar.fname + " " + myChar.lname + " attempts his special: ");
myChar.special(myChar.jumpKick)
for (i = 1; i < 101; i++) {
myChar.hits(myChar.allHits)
myChar.lifes(myChar.lifes)
}
function myOutfit() {
document.getElementById("demo").innerHTML = ("He is wearing " + myChar.outfit)
}
var start = Date.now();
var response = prompt("Do you think my character has what it takes?", "");
var end = Date.now();
var elapsed = (end - start) / 1000;
console.log("You took " + elapsed + " seconds" + " to type: " + response);

You need to have a way to communicate outside of the object, of what is happening inside the object.
For example, when something happens in a function, like lifes() or hits(), you should assign a value to a variable on the object to retain state. That way you can access the state from the for loop.
Example:
this.isAlive = true; // starting condition
this.lifes = function() {
var life = Math.floor(Math.random() * (3 - 0 + 1)) + 0;
this.isAlive = (life > 0);
if (this.alive) {
document.write('you survived');
} else {
document.write('you died');
}
Now in your for loop, you can access isAlive:
// loop until 100 attempts or you die, which ever comes first
for (i = 1; i < 101 && myChar.isAlive; i++) {
myChar.hits(myChar.allHits)
myChar.lifes(myChar.lifes)
}

well in general you can break out of foor loops aswell as prevent further execution of a foor loop and continue the next iteration:
for (var i = 0; i < 10; i++) {
if (i == 4) continue;
if (i == 8) break;
console.log(i);
}
this will basically print: 0, 1, 2, 3, 5, 6, 7
(as you can see it kind of skipped 4)
(it will also work in while / do while loops)
so in your case you could check if the return value of one of your functions is true or false or do some other kind of conditional checking in order to break out of the loop.
or similar to how Rob Brander wrote in his answer:
var maxTurns = 100;
var turns = 0;
while (myChar.isAlive && ++turns <= maxTurns) {
myChar.hits();
myChar.lifes();
}
console.log("character is: " + myChar.isAlive ? "alive" : "dead");
console.log("after: " + turns + " turns.");