javascript - (JS)拼接替换数组中的值只替换第一个值
问题描述
我有一个网页,我正在尝试选择和替换/删除一个值。当我单击选择时,在控制台中它显示我正在选择我要选择的项目,但是当将值输入到 splice 命令中时,它只会更改数组的第一个条目。
第一个功能是根据位置选择栏,节功能是栏数组值,然后出现栏和按钮的位置,如果值为-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
}
问题是:
if(replaceBox.value >0) {
barVals.splice(barNum, 1, parseInt(replaceBox.value));
它应该从位置 barNum 开始,长度为 1,并获取替换框的 int 值并使用它来拼接该值
编辑 - 我在页面的替换屏幕截图之前和第二个屏幕截图之后包含了页面的图像
解决方案
好吧,看来我是以完全错误的方式开始的,所以这里有一个足够不同的解决方案。这是放在绘图函数中的,取自画布本身。
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");
}
}
}
推荐阅读
- c - 如何使用 LLVMBuildStore API
- html - 如何动态使所选颜色变暗
- wordpress - 检查数据库中是否已存在 post_content
- python - 小部件未显示在 Tkinter GUI 中
- yii2 - Yii2 - 语法错误或访问冲突:1066 Not unique table
- arrays - 使用@RequestParam在spring mvc中请求数组类型参数时如何始终采用第一个参数
- processing - 处理 3.4 中的翻转图像
- vue.js - 在 Vue 中按类名动态统计子元素
- c - 为什么当 recvfrom() 来自多播组地址时我得到 -1?
- python - (pymysql.err.OperationalError) (1045, u"Access denied for user 'cmr378'@'localhost' (using password: YES)")