Question

此例程将成为网页的一部分，该网页允许用户通过单击作品旁边的按钮来编辑他们感兴趣的艺术作品列表。屏幕上的列表将动态更新。

我的第一个版本添加了＆＃39;和＆＃39;删除＆＃39;在两个不同的功能。响应在href（addTo removeFrom）中进行了硬编码：

addToList('artlist','Painting #1')
removeFromList('artlist','')

function addToList(id,listEntry) {
    var container = document.getElementById(id);
    container.innerHTML = listEntry;
}

function removeFromList(id,listEntry) {
    var container = document.getElementById(id);
    container.innerHTML = listEntry;
}

有效。

然后更新了：添加了一个包含列表的数组（就像用户以前的选择一样，并且新的选择被放入变量中以模拟活动选择。

但是有问题：

每个函数都重复了例行程序的内容

var screenList = document.getElementById(id); 
screenList.innerHTML = listEntry;

用户可以通过点击“删除”来删除列表。按钮，直到它为空，或添加新选择，然后删除＆＃39;“
用户可以一遍又一遍地添加新选择。

尝试将它们组合在一个新功能中并使用＆＃39;键＆＃39;变量不允许多次添加新选择，只允许删除一次新选择，因此用户可以改变主意。

我发现了push，pop和innerhtml（当我几年前第一次尝试使用javascript时，这些不在身边 - 是的，我知道，我已经老了）并且能够移动＆＃34;容器＆＃34;我只需要一次。

var workList = ["Man in Blue", "A Collection of Portraits"];
var work = "Stand Out";

function addremove(id,listEntry) {  
    if (typeof key === 'undefined') { // first time through set list with  no change
        var key = 0;                  // intitialize key, key=0, can add selection, key=1 already added
    } else if (key === 0) {           // add user selection to list
        workList.push(work);
        key = key++;                  // key=1 selection added don't add again
    } else if (key === 1) {           // allow user to change mind and remove selection
        workList.pop();
        key = key--;                  // key=0 selection removed - can be added again
    }

    var screenList = document.getElementById(id); // add list to div - artlist
    screenList.innerHTML = listEntry;
}

使用此版本，我可以获取列表，以便在未定义键时填充，但我无法添加或删除选择。我在控制台运行时运行了测试，没有出现任何错误或其他问题。我认为这是一个逻辑问题，但我看不出有什么需要改变。

Answer 1

@Phil @Prisoner感谢您的帮助。这是工作程序：

<script type="text/javascript">
var workList = ["Man in Blue", "A Collection of Portraits"];
var work = "Stand Out";
var key = 3;                        // initialize key, key=0, can add selection, key=1 already added

function addremove(id,listEntry) {  

    if (key == 0) {                 // add selection to list
        workList.push(work);
        key++;                      // key=1 selection added don't add again
    } else if (key == 1) {          // allow user to change mind and remove selection
        workList.pop();
        key--;                      // key=0 selection removed - can be added again
    }else if (key == 3) {           // first time through set list with  no change
        key = 0;                          
    }

    var screenList = document.getElementById(id); // add list to div - artlist
    screenList.innerHTML = listEntry;
}
</script>

在声明中，我给键值3，并且摆脱了＃34; undefined。＆＃34;

将键更改为0已移至底部。（不知道这有什么用，但对我来说看起来更好。

＆＃34; key = key ++＆＃34;改为＆＃34;关键++＆＃34;

一切正常。让一些新鲜的眼睛看着它真是太好了。再次感谢！

功能不起作用但部件单独工作

1 个答案: