Javascript - 帮助在 2 个数组/堆栈之间移动答案

【问题标题】：Javascript - Help moving between 2 Arrays/StacksJavascript - 帮助在 2 个数组/堆栈之间移动
【发布时间】：2012-12-27 21:49:55
【问题描述】：

我有 2 个数组和一个变量。我可以将一个项目推送到一个变量中，然后再次单击，将其添加到一个数组中。但是，我有另一个按钮，可以将该数组中的一个项目移回变量中，然后将变量移动到另一个数组中。我的代码在第一部分工作，但是我的函数现在加载到第二部分，请问有什么帮助吗？

似乎是这部分不起作用

<INPUT type=button value="Back" onClick='txtPop.value = popBackStack();showStack(theList);pushForStack(curUrl);
showStack2(theList2);'>

整个代码如下：

<SCRIPT>
    var backStack = new Array();
    var forStack = new Array();
    var curUrl = document.getElementById("txtPop");

    function pushStack(newVal) {
      backStack.push(curUrl);
      curUrl = newVal;
    }

    function pushForStack(newVal) {
      CurUrl = newVal;
      forstack.push(curUrl);
    }

    function popBackStack() {
      var popVal = backStack.pop();
      if (popVal == undefined) return "Nothing left!";
      else return popVal
    }

    function popForStack() {
      var popVal = forStack.pop();
      if (popVal == undefined) return "Enter a new URL";
      else return popVal;
    }

    function showStack(theSelect) {
      theSelect.options.length = 0;
      for (var i = 0; i < backStack.length; i++) {
        var theOption = new Option(backStack[i]);
        theSelect.options[theSelect.options.length] = theOption;
      }
    }

    function showStack2(theSelect) {
      theSelect.options.length = 0;
      for (var i = 0; i < forStack.length; i++) {
        var theOption = new Option(forStack[i]);
        theSelect.options[theSelect.options.length] = theOption;
      }
    }
 </SCRIPT>

<table width="104%" height="364" border="5" cellpadding="3" cellspacing="3">
<tr>
<th width="30%" height="78" scope="col"><p>
<INPUT type=button value="Back" onClick='txtPop.value =     popBackStack();showStack(theList);pushForStack(curUrl);
showStack2(theList2);'></p></th>
<th width="46%" scope="col"><p>
<center>
<INPUT type=text name=txtPush>
<INPUT type=button value="Push"   onClick='pushStack(txtPush.value);txtPush.value="";txtPop.value = curUrl;   showStack(theList);'>
</center>
</p></th>
<th width="24%" scope="col"><p><INPUT type=button value="Forward" onClick="txtPop.value      = popBackStack();showStack2(theList2);"></p></th>
</tr>
<tr>
<td><p><center>
<SELECT name="theList" size=12>
</SELECT>
</center></p></td>
<td><p><center><INPUT type=textki name=txtPop size=25></center></p></td>
<td><center>
<SELECT name="theList2" size=12>
</SELECT>
</center></td>
</tr>
</table>

【问题讨论】：

哎呀！将大量的 javascript 推送到 HTML 属性中。如果您将该代码放入 javascript 函数中，然后在 click 事件上调用该函数...通过使用该 html 属性或在文档 onLoad 代码中显式添加处理程序，您会发现生活变得更加轻松。

标签： javascript html arrays list stack

【解决方案1】：

你的代码有很多问题

调用document.getElementById('txtPop') 应该不返回任何内容，因为您没有具有该ID 的元素。您有一个具有该 name 的元素，但没有 id。
您正试图将curUrl 推入堆栈，但curUrl（正确初始化时）是一个元素，而不是一个值...我不相信这就是您想要做的。
您的点击处理程序过于复杂，无法放入元素属性中。将它们放入自己的函数中，然后使用函数名称附加它们...查看一些有关事件处理的教程以获得更好的方法，例如 www.w3.org/wiki/Handling_events_with_JavaScript。请不要遵循 w3schools 教程。他们比坏更糟糕。

【讨论】：