(JS) 拼接替换数组中的值，只替换第一个值

Question

我有一个网页，我试图在其中选择和替换/删除一个值。当我单击选择时，在控制台中它显示我正在选择我想要选择的项目，但是当将值输入到 splice 命令时它只会更改数组的第一个条目。

第一个函数是根据位置选择柱，section 函数是柱数组值的位置，然后出现一个柱和按钮，如果值为 -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';

    }

问题是：

if(replaceBox.value >0) {

    barVals.splice(barNum, 1, parseInt(replaceBox.value));

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

编辑 - 我在页面的替换屏幕截图之前和第二个屏幕截图之后包含了页面图像

Answer 1

好吧，看来我是以完全错误的方式开始的，所以这里有一个足够不同的解决方案。这是放在绘制函数中，取自画布本身。canvas.onclick = function mousePos(Event) {&nbsp; &nbsp; var rect = canvas.getBoundingClientRect();&nbsp; &nbsp; var posX = Event.clientX- rect.left;&nbsp; &nbsp; var posY = Event.clientY - rect.height;&nbsp; &nbsp; console.log("X = "+posX +" Y = "+ posY);&nbsp; &nbsp; var barWidth= 500/barVals.length;&nbsp; &nbsp; console.log("Bar Width = "+barWidth);&nbsp; &nbsp; var barNum;&nbsp; &nbsp; barNum = Math.floor((posX-60) / barWidth);if(barNum>=0 && barNum < barVals.length) {&nbsp; &nbsp; var position = barNum;&nbsp; &nbsp; console.log(position);&nbsp; &nbsp; var amount = prompt("Please enter the new value", "734");&nbsp; &nbsp; //barVals[position] = amount;&nbsp; &nbsp; if(amount >0) {&nbsp; &nbsp; &nbsp; &nbsp; barVals.splice(position, 1, parseInt(amount));&nbsp; &nbsp; &nbsp; &nbsp; console.log(amount);&nbsp; &nbsp; &nbsp; &nbsp; draw(); // redraw&nbsp; &nbsp; }&nbsp; &nbsp; else if(amount = -1){&nbsp; &nbsp; &nbsp; &nbsp; barVals.splice(position, 1);&nbsp; &nbsp; &nbsp; &nbsp; colours.splice(position, 1)&nbsp; &nbsp; &nbsp; &nbsp; draw(); // redraw&nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; alert("Incorrect value entered");&nbsp; &nbsp; }}}