为什么 Javascript 按钮不起作用？

Question

我想要达到的效果是，当我单击一个按钮（称为 about）时，div（id=主页）之一被隐藏，另一个 div（id=intro_page，之前隐藏）变为可见。

我有以下 HTML 代码：

<script type="text/javascript" src='js/index_script.js'></script>
.
.
<input onclick="clicked_about()" type="button" value='About'></input>
.
.
.
<div id="homepage">
     content
</div>
<div id="intro_page" style="display: none">
        <h1 id="intro_page_caption"> About Me </h1>
        <div id="intro_main_text">
            <p> I enjoy reading, swimming, jogging, painting and exploring. </p>
        </div>
        <div class="intro_pic1">
                <figure>
                <img src="img/my_picture.jpg" alt="My Picture" height="250">
                <figcaption>My Picture</figcaption>
                </figure>
        </div>
</div>

以下是JavaScript代码：

function clicked_about(){
   document.getElementById(homepage).style.display = 'none';
   document.getElementById(intro_page).style.display = 'block';
}

我看到的是代码被隐藏了（因为在 HTML 中显示设置为 none），但是当我点击按钮时，没有任何反应。

我做错了什么？

Answer 1

只需将 ID 括在引号中：

function clicked_about(){
   document.getElementById("homepage").style.display = 'none';
   document.getElementById("intro_page").style.display = 'block';
}

否则 homepage 和 intro_page 是变量，因此未定义，除非您之前在别处定义了它们。

Answer 2

getElementById() 的参数是一个字符串。因此，假设您没有设置一些（全局）变量 homepage 和 intro_page，您的 clicked_about() 函数应该如下所示：

function clicked_about(){
   document.getElementById('homepage').style.display = 'none';
   document.getElementById('intro_page').style.display = 'block';
}

Answer 3

函数getElementById接受字符串格式的参数。将您的 ID 包裹在 " 中，它将起作用

function clicked_about() {
  document.getElementById("homepage").style.display = 'none';
  document.getElementById("intro_page").style.display = 'block'; // missing quotes here
}

<button onclick="javascript:clicked_about()" type="button">About</button>
<div id="homepage">
  content
</div>
<div id="intro_page" style="display: none">
  <h1 id="intro_page_caption"> About Me </h1>
  <div id="intro_main_text">
    <p>I enjoy reading, swimming, jogging, painting and exploring.</p>
  </div>
  <div class="intro_pic1">
    <figure>
      <img src="img/my_picture.jpg" alt="My Picture" height="250">
      <figcaption>My Picture</figcaption>
    </figure>
  </div>
</div>

Answer 4

我对你的代码做了一些修改，检查一下:)

window.onload = function(){
    var mybutton = document.getElementById("mybutton");
    mybutton.addEventListener("click",function(){
       
       document.getElementById("homepage").style.display = 'none';
       document.getElementById("intro_page").style.display = 'block';
   });
}

<button id="mybutton" type="button">About</button>

<div id="homepage">
     content
</div>
<div id="intro_page" style="display: none">
        <h1 id="intro_page_caption"> About Me </h1>
        <div id="intro_main_text">
            <p> I enjoy reading, swimming, jogging, painting and exploring. </p>
        </div>
        <div class="intro_pic1">
                <figure>
                <img src="img/my_picture.jpg" alt="My Picture" height="250">
                <figcaption>My Picture</figcaption>
                </figure>
        </div>
</div>

Answer 5

很简单

document.getElementById("btn").onclick=function(){clicked_about();};

和

<button id="btn">About</button>

这是一个 JSFiddle https://jsfiddle.net/upujp2q9/

为什么 Javascript 按钮不起作用？

Why is Javascript button not working?

html

javascript

css

webpage