We Keep Coding

Unit testing: Document is not defined, error for 'document.getElementById()'

I am new to javascript. I am doing a unit test on my project, and getting some error. Here is my code:
function timeConvert() {
let n = document.getElementById('yourNo').value;
var Jam = Math.floor(n / 3600);
var Menit = Math.floor(n / 60);
var Detik = Math.floor(n % 60);
document.getElementById("result")
.innerHTML = "Waktu yang tersisa: " + "<br>"
+ Jam + " Jam " + "<br>"
+ Menit + " Menit " + "<br>"
+ Detik + " Detik ";
}
console.log("normal use", timeConvert(1633790418));
And i got error like this:
C:\Users\USER\Desktop\backend_test\backend.js:3
let n = document.getElementById('yourNo').value;
^

how to get value from select without refresh?

I made a CGPA-SGPA calculator and I cannot get the value with refresh.
When I refresh and check the value it get feed
but not getting value without refresh.
var credit_1001 = document.querySelector('#credit_1001')
var grade_1001 = document.querySelector('#grade_1001')
var credit_1002 = document.querySelector('#credit_1002')
var grade_1002 = document.querySelector('#grade_1002')
var credit_1003 = document.querySelector('#credit_1003')
var grade_1003 = document.querySelector('#grade_1003')
var credit_1004 = document.querySelector('#credit_1004')
var grade_1004 = document.querySelector('#grade_1004')
var credit_1008 = document.querySelector('#credit_1008')
var grade_1008 = document.querySelector('#grade_1008')
var credit_1009 = document.querySelector('#credit_1009')
var grade_1009 = document.querySelector('#grade_1009')
//btn and result S1
var btn_check = document.querySelector('#check_s1')
var result_s1 = document.querySelector('#result_s1')
//btn click S1
var total_s1_credit = parseInt(credit_1001.value) + parseInt(credit_1002.value) + parseInt(credit_1003.value) + parseInt(credit_1004.value) + parseInt(credit_1008.value) + parseInt(credit_1009.value)
var got_s1_marks = parseInt(credit_1001.value) * parseInt(grade_1001.value) + parseInt(credit_1002.value) * parseInt(grade_1002.value) + parseInt(credit_1003.value) * parseInt(grade_1003.value) + parseInt(credit_1004.value) * parseInt(grade_1004.value) + parseInt(credit_1008.value) * parseInt(grade_1008.value) + parseInt(credit_1009.value) * parseInt(grade_1009.value)
btn_check.addEventListener('click', () => {
result_s1.innerText = " S1 SGPA " + got_s1_marks / total_s1_credit
console.log("S1 Total Credit = " + total_s1_credit)
console.log("S1 Got Marks = " + got_s1_marks)
console.log("S1 SGPA = " + result_s1.innerText)
})

You need to get the values for your calculation inside of the click handler, right now you get them before the click, and then use (the old values) when the click happens
btn_check.addEventListener('click', () => {
//btn click S1
var total_s1_credit = parseInt(credit_1001.value) + parseInt(credit_1002.value) + parseInt(credit_1003.value) + parseInt(credit_1004.value) + parseInt(credit_1008.value) + parseInt(credit_1009.value)
var got_s1_marks = parseInt(credit_1001.value) * parseInt(grade_1001.value) + parseInt(credit_1002.value) * parseInt(grade_1002.value) + parseInt(credit_1003.value) * parseInt(grade_1003.value) + parseInt(credit_1004.value) * parseInt(grade_1004.value) + parseInt(credit_1008.value) * parseInt(grade_1008.value) + parseInt(credit_1009.value) * parseInt(grade_1009.value)
result_s1.innerText = " S1 SGPA " + got_s1_marks / total_s1_credit
console.log("S1 Total Credit = " + total_s1_credit)
console.log("S1 Got Marks = " + got_s1_marks)
console.log("S1 SGPA = " + result_s1.innerText)
})

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?

troubleshoot percent function in javascript

https://jsfiddle.net/kelliwilli/6bgrt7bL/128/
var percent = function() {
var totalGames = (scores.draw + scores.p1 + scores.Ali);
var drawPercent = ((scores.draw / totalGames) * 100);
var AliPercent = ((scores.Ali / totalGames) * 100);
var p1Percent = ((scores.p1 / totalGames) * 100;
alert ("There has been " + drawPercent + "% of draws. I won " + AliPercent + "%, and" +p1 +" won" + p1Percent "%!");
}

Seems to just be a simple syntax error, which is not what I thought you were getting at with the question or lack of...
Anyways alert ("There has been " + drawPercent + "% of draws. I won " + AliPercent + "%, and" +p1 +" won" + p1Percent + "%!"); should fix it. You simply forgot to concat the last variable.
Look into template literals, they're super handy for throwing together strings with many variables, along with the fact I find them to be awesome syntax wise.
Template literal form:
alert(`There has been ${drawPercent}% of draws. I won ${AliPercent}%, and ${p1} won ${p1Percent}%!});

https://jsfiddle.net/kelliwilli/6bgrt7bL/224/
//percent funtion
var percent = function() {
var totalGames = (scores.draw + scores.p1 + scores.Ali);
var drawPercent = ((scores.draw / totalGames) * 100);
var AliPercent = ((scores.Ali / totalGames) * 100);
var p1Percent = ((scores.p1 / totalGames) * 100);
alert("There has been " + drawPercent + "% of draws. Ali won " + AliPercent + "%, and " + p1 + " won " + p1Percent + "% of the games! Thanks for playing!!!");
}
There was some code out of sequence, calling a function before it was defined, and an "if" loop that should have been a "while".
Simple fixes. :)
This fiddle link works!

Random Insult Generator (Randomizing Results)

I've written a random insult generator. It is fine, and works well to what I need. The problem is that when I run the program more than once, the insult is the same every time, unless I copy all the vars again. Here is my code:
var bodyPart = ["face", "foot", "nose", "hand", "head"];
var adjective = ["hairy and", "extremely", "insultingly", "astonishingly"];
var adjectiveTwo = ["stupid", "gigantic", "fat", "horrid", "scary"];
var animal = ["baboon", "sasquatch", "sloth", "naked cat", "warthog"];
var bodyPart = bodyPart[Math.floor(Math.random() * 5)];
var adjective = adjective[Math.floor(Math.random() * 4)];
var adjectiveTwo = adjectiveTwo[Math.floor(Math.random() * 5)];
var animal = animal[Math.floor(Math.random() * 5)];
var randomInsult = "Your" + " " + bodyPart + " " + "is more" + " " + adjective + " " + adjectiveTwo + " " + "than a" + " " + animal + "'s" + " " + bodyPart + ".";
randomInsult;
"Your nose is more insultingly stupid than a warthog's nose."
randomInsult;
"Your nose is more insultingly stupid than a warthog's nose."
What I'm trying to do is when I run randomInsult; again, I want a different result.

Use a function:
function generateRandomInsult() {
// ... all of your existing code ...
return randomInsult;
}
generateRandomInsult(); // this is what you repeat each time

As per my comment above, you need to use a function.
var bodyPart = ["face", "foot", "nose", "hand", "head"];
var adjective = ["hairy and", "extremely", "insultingly", "astonishingly"];
var adjectiveTwo = ["stupid", "gigantic", "fat", "horrid", "scary"];
var animal = ["baboon", "sasquatch", "sloth", "naked cat", "warthog"];
var randomInsult = (function() {
var bp, a, a2, an;
var bp = bodyPart[Math.floor(Math.random() * 5)];
var a = adjective[Math.floor(Math.random() * 4)];
var a2 = adjectiveTwo[Math.floor(Math.random() * 5)];
var an = animal[Math.floor(Math.random() * 5)];
var insult = "Your" + " " + bp + " " + "is more" + " " + a + " " + a2 + " " + "than a" + " " + an + "'s" + " " + bp + ".";
alert(insult);
});
document.getElementById('test').addEventListener('click', randomInsult, false);
<button id="test">Click me</button>

You'll have to do something like this to select a random bodyPart, adjective, adjectiveTwo and animal at each call.
function randomInsult() {
var bodyPart = ["face", "foot", "nose", "hand", "head"];
var adjective = ["hairy and", "extremely", "insultingly", "astonishingly"];
var adjectiveTwo = ["stupid", "gigantic", "fat", "horrid", "scary"];
var animal = ["baboon", "sasquatch", "sloth", "naked cat", "warthog"];
var bodyPart = bodyPart[Math.floor(Math.random() * 5)];
var adjective = adjective[Math.floor(Math.random() * 4)];
var adjectiveTwo = adjectiveTwo[Math.floor(Math.random() * 5)];
var animal = animal[Math.floor(Math.random() * 5)];
return "Your" + " " + bodyPart + " " + "is more" + " " + adjective + " " + adjectiveTwo + " " + "than a" + " " + animal + "'s" + " " + bodyPart + ".";
}
In your piece of code you are generating the "randomInsult" string only once. It need to be generated at each call, with new random values.
So, simply embed your code in a function.
Call it this way:
randomInsult();