Javascript （JS）拼接以仅替换第一个值来替换数组中的值

我有一个网页，试图在其中选择和替换/删除一个值。当我单击选择时，在控制台中显示我正在选择要选择的项目，但当在“拼接”命令中输入值时，它仅更改阵列的第一个条目

第一个功能是根据位置选择条形图，截面功能是条形图数组值、条形图和按钮出现的位置，如果值为-1，则删除该值，如果值为-1，则替换该值

    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
}

它应该从长度为1的位置barNum开始，取替换框的int值并使用它拼接该值

编辑-

---

我在替换前和替换后都添加了一张页面图像，看来我是以完全错误的方式开始的，所以这里有一个完全不同的解决方案。这被放在draw函数中，从画布本身获取

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");
    }
}

}

canvas.onclick=函数鼠标点（事件）{
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（“条宽=”+条宽）；
巴努姆变种；
barNum=数学楼层（（posX-60）/酒吧宽度）；
if（barNum>=0&&barNum0）{
barVals.拼接（位置，1，parseInt（数量））；
控制台日志（金额）；
draw（）；//重新绘制
}
否则如果（金额=-1）{
钢筋接头（位置1）；
颜色.拼接（位置1）
draw（）；//重新绘制
}否则{
警报（“输入的值不正确”）；
}
}
}

console.log（replaceBox.value）显示什么？另外，请发布相关的HTML。我已经在页面上方添加了一张替换前后的图片。console.log（replaceBox.value）显示在第二个文本框中键入的值，该文本框用于替换您单击的值。请

console.log

您的

barVals

数组，我希望

barNum

小于

barVals.length

谢谢您的评论。这是一个，它显示了条形图数组值（1是第二个值，选择3），它显示了之前的数组，将替换第二个值的替换条形图的值，然后是第二个数组，其中它总是替换第一个值。是的，你是对的，barNum小于barVal.length，因为它只能在画布中选择，但你是对的，我应该检查一下。

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");
    }
}

}