Question

我正在编写一个简单的函数，它使我的菜单动态，在按钮点击时加载页面。 HTML看起来像这样：

<button id="appnav" value="button1" type="button" onclick="app(this.value)">Button 1</button>   
<button id="appnav" value="button2" type="button" onclick="app(this.value)">Button 2</button>
<button id="appnav" value="button3" type="button" onclick="app(this.value)">Button 3</button>


<div id="app-div">

</div>

JavaScript文件如下所示：

function app(clickVal) {
var clickVal;

  if (clickVal == "button1") {
  document.getElementById("app-div").innerHTML = "PAGE 1";
  } 

  else if (clickVal == "button2") {   
 document.getElementById("app-div").innerHTML = "PAGE 2";
  }

  else if (clickVal == "button3") {
 document.getElementById("app-div").innerHTML = "PAGE 3";
  }

}

这部分效果很好，但是窗口（div id =＆＃34; app-div＆＃34;）是空的，直到点击其中一个按钮。我想为它分配一个默认值。我已经尝试通过编写这个函数

来做到这一点

    function defaultValue () {
      document.getElementById('app-div').innerHTML = "PAGE 1";
    }

并尝试启动它的app-div，但它仍然无法正常工作。有人有什么想法吗？

谢谢！

Answer 1

代码看起来正确。在defaultValue函数中，检查＆＃34; document.getElementById（＆＃39; app-div＆＃39;）＆＃34;不为null或未定义。也只是把它扔出去，你将innerHTML设置为一个字符串＆＃34; PAGE 1＆＃34;。我假设你知道这不是真正的HTML语法。也许您应该使用文本＆＃34; PAGE 1＆＃34;将值设置为实际的HTML标记内容。作为div的内容，例如。

Answer 2

当DOM准备好进行修改时，您可以调用默认值函数：

document.addEventListener('DOMContentLoaded', defaultValue, false);

为了兼容性目的，可以添加以下代码段：

window.addEventListener('load', defaultValue, false );

document.attachEvent("onreadystatechange", defaultValue);

window.attachEvent("onload", defaultValue);

Answer 3

它可以避免default值函数并调用您的函数

function app(clickVal) { ... }

app("button1");

即使是默认值，也应直接在html中指定

<div id="app-div"> PAGE 1</div>

Answer 4

你可以简单地拥有

<div id="app-div">
    PAGE 1
</div>

点击按钮后，#app-div的innerHtml将被替换。无需defaultValue()

变量的默认值

4 个答案: