(JS) Splice to replace a value in an array only ever replacing the first value

Question

I have a web page where I'm trying to select and replace/delete a value. When I click to select, in the console it shows that I'm selecting the item I want to select, but when the value is entered into the splice command it only changes the first entry of the array.

The first function is to select the bar based on the position and the section function is where the bar array value, a bar and button then appears and if the value is -1 it will delete the value and if not it will replace it

    function clickBar(Event) {

    //Receives position in xy for user clicks
    var posX = Event.clientX;
    var posY = Event.clientY;
    console.log("X = "+posX +" Y = "+ posY);

    var barWidth= 500/barVals.length;
    console.log("Bar Width = "+barWidth);
    var barNum;

    //checks to see if click was within the confines of the area that the boxes are displayed
    //if so barNum is calculated to show which position in the array you are clicking on

    if(posY >topY && posY < bottomY && posX > leftX && posX < rightX){
        console.log("Inside");
        barNum = Math.floor((posX - leftX) / barWidth);
        console.log("Bar Number = "+barNum);
    } else {
        console.log("Outside");}

    if (barNum > -1) {
        replaceBar(barNum)
    }

    console.log(barVals);
    draw();
}

document.addEventListener("click", clickBar);

function replaceBar(barNum) {

    console.log("Bar Number2 = "+barNum);
    var replaceBox = document.getElementById('replaceVal');
    var replaceBtn = document.getElementById('replaceBtn');

    var displayBoxSetting = replaceBox.style.display;
    var displayBtnSetting = replaceBtn.style.display;

    //hiding and displaying the edit text box and button
    if (displayBoxSetting == 'block' && displayBtnSetting=='block') {
        replaceBox.style.display = 'none';
        replaceBtn.style.display = 'none';
    }
    else {
        replaceBox.style.display = 'block';
        replaceBtn.style.display = 'block';
    }

    //Used to replace the value of the
    if(replaceBox.value >0) {
        barVals.splice(barNum, 1, parseInt(replaceBox.value));
        colours.push(document.querySelector('input[name="colour"]:checked').value);
        replaceBox.value = 0;
        draw(); // redraw

    }
    else if(replaceBox.value == -1){
        barVals.splice(barNum, 1);
        replaceBox.value = 0;
        draw(); // redraw
    }
    textBoxObj.value = 0;
    replaceBox.style.display = 'none';
    replaceBtn.style.display = 'none';
    draw(); // redraw
}

The problem is:

if(replaceBox.value >0) {
    barVals.splice(barNum, 1, parseInt(replaceBox.value));

It should be going from position barNum, of length 1, and taking the int value of the replace box and using it to splice the value

EDIT - I've included an image of the page before the replace Screenshot of page and after 2nd Screenshot

Answer 1

Well it appears i had started about this in the completly wrong way so heres a different enough solution. This is put within the draw function, taking from the canvas itself.

canvas.onclick = function mousePos(Event) {


    var rect = canvas.getBoundingClientRect();
    var posX = Event.clientX- rect.left;
    var posY = Event.clientY - rect.height;
    console.log("X = "+posX +" Y = "+ posY);

    var barWidth= 500/barVals.length;

    console.log("Bar Width = "+barWidth);

    var barNum;

    barNum = Math.floor((posX-60) / barWidth);

if(barNum>=0 && barNum < barVals.length) {
    var position = barNum;
    console.log(position);
    var amount = prompt("Please enter the new value", "734");
    //barVals[position] = amount;

    if(amount >0) {
        barVals.splice(position, 1, parseInt(amount));
        console.log(amount);
        draw(); // redraw

    }
    else if(amount = -1){
        barVals.splice(position, 1);
        colours.splice(position, 1)
        draw(); // redraw
    }else{
        alert("Incorrect value entered");
    }
}

}