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

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

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

Answer 2

我在代码中做了一些更改，请检查这个:)

＆＃13;

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';
   });
}

＆＃13;

<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>

＆＃13;

Answer 3

只需将ID括在引号中：

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

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

Answer 4

函数app.config(['$httpProvider', function($httpProvider) { // response cookie name $httpProvider.defaults.xsrfCookieName = 'csrf_cookie'; // request header name where the value of the cookie get set $httpProvider.defaults.xsrfHeaderName = 'HTTP_X_XSRF_TOKEN'; // to set ajax request header $httpProvider.defaults.headers.common = { 'X-Requested-With' : 'XMLHttpRequest'}; }接受字符串格式的参数。在getElementById中包含您的ID并且它可以正常工作

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

Answer 5

非常简单

try
{
     Children = oGenData.Child("CAMPAIGNLINES");

     if (Children != null)
        if (Children.Count > 0)
           foreach (var line in Children)
              if (line != null) Children.Remove(0);                


     return true;
 }
 catch (Exception ex)
 { //handle exception }

带

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

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

为什么Javascript按钮不起作用？

5 个答案: