We Keep Coding

What is the error when im trying to add image?

The output should be that every time that there is an opponent's player around the click, he becomes the player who is currently pressed. The code I sent is a check for the row above and chanching its image. The problem is that every time it comes to adding the image, it writes a red line underneath and nothing happens. What is the reason for this?
function Eating_Action(idClicked, rowClicked, colClicked) {
IDRup = (rowClicked - 1) * BoardSize + colClicked;
IDRdown = (rowClicked + 1) * BoardSize + colClicked
IDCright = rowClicked * BoardSize + (colClicked + 1);
IDCleft = Number(rowClicked) * Number(BoardSize) + (Number(colClicked) - 1);
IDDleftdown = Number(First1Clicked) + Number(Number(BoardSize) - 1);
IDDleftup = (rowClicked - 1) * BoardSize + (colClicked - 1);
IDDrightdown = Number(First1Clicked) + Number(Number(BoardSize) + 1);
IDDrightup = (First1Clicked) - (BoardSize - 1);
//check all the pieces around the place that was clicked and change it to
if (intBoard[rowClicked][colClicked] == 1) {
//check eating for UP ROW
if (rowClicked - 1 >= 0) {
if (intBoard[rowClicked - 1][colClicked] == 2) {
document.getElementById(IDRup).innerHTML = "<img width='50px' height='50px' src='O.png'/>";
intBoard[rowClicked - 1][colClicked] = 1;
}
}

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?

Javascript move down scrollbar using element not working

Hey all I have the html code below that should allow the page to scroll all the way down to the nextChatHolder element when you push the button.
It adds the chat bubble just fine at the bottom but I want it to scroll down to the nextChatHolder each time I press the button.
I have no errors and these examples work standalone. So naturally there somewhere in my javascript or css that is causing it not to scroll - and I am unable to find what that it!
Visual: https://jsbin.com/xihosicayo/edit?js,output
function getElementY(query) {
return window.pageYOffset + document.querySelector(query).getBoundingClientRect().top;
}
function scrollToItem(item) {
var diff = (item.offsetTop-window.scrollY)/8;
if (Math.abs(diff) > 1) {
window.scrollTo(0, (window.scrollY+diff));
clearTimeout(window._TO);
window._TO=setTimeout(scrollToItem, 30, item);
} else {
window.scrollTo(0, item.offsetTop);
}
}
function doScrolling(element, duration) {
var startingY = window.pageYOffset
var elementY = getElementY(element)
var targetY = document.body.scrollHeight - elementY < window.innerHeight ? document.body.scrollHeight - window.innerHeight : elementY
var diff = targetY - startingY
var easing = function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1; }
var start;
if (!diff) return
window.requestAnimationFrame(function step(timestamp) {
if (!start) start = timestamp;
var time = timestamp - start;
var percent = Math.min(time / duration, 1);
percent = easing(percent);
window.scrollTo(0, startingY + diff * percent);
if (time < duration) {
window.requestAnimationFrame(step);
}
})
}
function newTalk(textVal, pic) {
var my_elem = document.getElementById("nextChatHolder");
var div = document.createElement('div');
div.innerHTML = '<div class="animated animatedFadeInUp fadeInUp">' +
'<div class="chat self">' +
'<div class="user-photo">' +
'<img src="' + pic + '">' +
'</div>' +
'<p class="chat-message">' + textVal + '</p>' +
'<span class="timeself">11:01 PM | Oct 11 2019</span>' +
'</div>' +
'</div>';
my_elem.parentNode.insertBefore(div, my_elem);
//scrollToItem(my_elem))
}

I believe you're looking for:
my_elem.scrollIntoView({behavior: "smooth",block: "end"})
as the last line in newTalk.
Documentation

.append not working on click

Simple button that should be creating new <p> elements when its clicked but it isn't working and I'm not sure why as I've compared it to other code of mine.
Demo
var battle = function() {
while(monsterHP > 0){
var playerDam = Math.floor(Math.random() * ((playerAtk - monsterAtk) + 2);
$('#battle').append("<p>You have hit the monster for " + playerDam + " damage. The monster has " + (monsterHP - playerDam) + "HP left</p>");
monsterHP -= playerDam;
if(monsterHP <= 0) {
$('#battle').append("<p>You have defeated the monster</p>");
}
}
}
$('#battleButton').click(function() {
battle();
}

You have many syntax errors in your code. If you correct them (as below), then it works fine. When you write a JQuery append, you need to put a ')' after your argument. Likewise, functions need to have a '}' after them.
var playerAtk = 5;
var playerDef = 5;
var playerHP = 10;
var monsterAtk = 4;
var monsterDef = 4;
var monsterHP = 8;
var battle = function() {
while(monsterHP > 0){
var playerDam = Math.floor(Math.random() * ((playerAtk - monsterAtk) + 2));
$('#battle').append("<p>You have hit the monster for " + playerDam + " damage. The monster has " + (monsterHP - playerDam) + "HP left</p>");
monsterHP -= playerDam;
if(monsterHP <= 0) {
$('#battle').append("<p>You have defeated the monster</p>");
}
}
}
$('#battleButton').click(function() {
battle();
});

JS Calculate total on change

I Have this script that calculates the total of some values as the user selects them from dropdowns. Im no expert with JS. Additionally to onchange I would like this code to calculate the value on page load? I would assume it is some copy and paste of this code with an alteration on the function and an if statement?
<script>
$(function() {
$(".DropChange").change(function(){
var valone = $('#ValOne').val();
var valtwo = $('#ValTwo').val();
var valthree = $('#ValThree').val();
var valfour = $('#ValFour').val();
var valfive = $('#ValFive').val();
var valsix = $('#ValSix').val();
var valseven = $('#ValSeven').val();
var valeight = $('#ValEight').val();
var total = ((valone * 1) + (valtwo * 1) + (valthree * 1) + (valfour * 1) + (valfive * 1) + (valsix * 1) + (valseven * 1) + (valeight * 1));
$('#Total').text(total);
});
});
</script>

Probably your simplest option is to stick the current onchange function into another function.
var calculateTotals = function(){
var valone = $('#ValOne').val();
var valtwo = $('#ValTwo').val();
var valthree = $('#ValThree').val();
var valfour = $('#ValFour').val();
var valfive = $('#ValFive').val();
var valsix = $('#ValSix').val();
var valseven = $('#ValSeven').val();
var valeight = $('#ValEight').val();
var total = ((valone * 1) + (valtwo * 1) + (valthree * 1) + (valfour * 1) + (valfive * 1) + (valsix * 1) + (valseven * 1) + (valeight * 1));
$('#Total').text(total);
};
Then change your onchange to
$(".DropChange").change(calculateTotals);
So your $(function(){ ... }); now looks like;
$(function(){
$(".DropChange").change(calculateTotals); // assign event
calculateTotals(); // calculate totals on load
});

Here is what you need:
<script>
(function() {
$(document).ready(function(){
showSum();
});
$(".DropChange").change(function(){
showSum();
}
function showSum(){
var valone = $('#ValOne').val();
var valtwo = $('#ValTwo').val();
var valthree = $('#ValThree').val();
var valfour = $('#ValFour').val();
var valfive = $('#ValFive').val();
var valsix = $('#ValSix').val();
var valseven = $('#ValSeven').val();
var valeight = $('#ValEight').val();
var total = ((valone * 1) + (valtwo * 1) + (valthree * 1) + (valfour * 1) + (valfive * 1) + (valsix * 1) + (valseven * 1) + (valeight * 1));
$('#Total').text(total);
}
}());
</script>