单击链接时更改内容，Javascript

Question

I had this working on one site, and I tried to recreate it but now it's not working... I want to have content in a div change without loading, by replacing the content via Javascript. 我有一个工作在一个网站上，我试图重新创建它，但现在它不工作...我希望通过Javascript替换内容，无需加载div更改内容。

Here's the HTML: 这是HTML：

<li><a onclick="mish()">Click me</a></li>

<div id="about">
  <h2>Im a header.</h2>
  <p>And Im a paragraph!</p>
</div>

And here's the JS, located in an external .js file: 这是位于外部.js文件中的JS：

function mish()
{
document.getElementById("about").innerHTML='<h2>Header am I.</h2>
<p>Paragraph am I and too.</p>';
}

And they are linked with this line in the head of the html (I've also tried in the body): 并且它们与html的头部中的这一行相关联（我也试过了）：

<script type="text/javascript" src="script.js"></script>

Again, I copied pretty much all of the code from another site I did, which still works, so I am very much at a loss as to why this one isn't working. 我再次复制了我所做的其他网站上的所有代码，这些代码仍然有效，所以我非常不知道为什么这个代码不起作用。

EDIT: Here is the head section: 编辑：这是头部分：

<head>
    <title>Shaq</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="script.js"></script>
</head>

DOUBLE EDIT: and the whole body: DOUBLE EDIT：和整个身体：

<body>

<div class="crusty">

    <div class="content">

        <nav>   
            <ul>
                <li><a onclick="bout()">Click Me</a></li>
                <li><a onclick="mish()">Click Me</a></li>
            </ul>
        </nav>

        <div class="actual">

            <div id="about">
            <h2>Im a Header</h2>
            <p>And Im a Paragraph</p>
            </div>

        </div><!-- end actual -->

    </div><!-- end content-->

</div><!-- end crusty -->

</body>

And TRIPLE EDIT to show exact contents of .js file: 和TRIPLE EDIT显示.js文件的确切内容：

function mish() {
    document.getElementById("about").innerHTML = '<h2>Header am I.</h2>'+ '<p>Paragraph am I and too.</p>';
}

Answer 1

The common practice in writing multi-line strings in JavaScript is the following. 在JavaScript中编写多行字符串的常见做法如下。 Presently you have a newline within the string (not escaped), which is not allowed in JavaScript. 目前，您在字符串中有一个换行符（未转义），这在JavaScript中是不允许的。

function mish() {
    document.getElementById("about").innerHTML = [
        '<h2>Header am I.</h2>',
        '<p>Paragraph am I and too.</p>'].join('\n');
}

The main take-away is that a newline can be communicated as \\n in JavaScript strings. 主要内容是可以在JavaScript字符串中将换行符作为\\n进行通信。

Answer 2

You have posted fragments of the code without showing us the full HTML. 您已发布代码片段，但未向我们显示完整的HTML。 Try using this code as this is how you should be doing it. 尝试使用此代码，因为这是您应该如何做到这一点。

<html>
<head>
<script type="text/javascript">
   function mish() {
      document.getElementById("about").innerHTML = '<h2>Header am I.</h2><p>Paragraph am I and too.</p>';
    }
</script>
</head>
<body>
    <li><a onclick="javascript:mish();">Click me</a>
    </li>
    <div id="about">
         <h2>Im a header.</h2>    
         <p>And Im a paragraph!</p>
    </div>
</body>
</html>

This should work. 这应该工作。 Check what are you doing different. 检查你在做什么不同。

If you are using external file for JS, copy the following code to the JS file: 如果您使用JS的外部文件，请将以下代码复制到JS文件：

   function mish() {
      document.getElementById("about").innerHTML = '<h2>Header am I.</h2><p>Paragraph am I and too.</p>';
    }

Make sure you do not wrap it inside the <Script></script> tag. 确保不将其包装在<Script></script>标记内。 You do not need this. 你不需要这个。 And then save this JS file exactly where your HTML file is. 然后将此JS文件保存在HTML文件的确切位置。

And last include this in you head section: 最后在你的头部分包括这个：

<script type="text/javascript" src="script.js"></script>

And, this has to work. 而且，这必须奏效。

单击链接时更改内容，Javascript

问题描述

2 个解决方案

解决方案1
1 2013-07-18 02:16:08

解决方案2
1 2013-07-18 02:28:27

单击链接时更改内容，Javascript

问题描述

2 个解决方案

解决方案1 1 2013-07-18 02:16:08

解决方案2 1 2013-07-18 02:28:27

解决方案1
1 2013-07-18 02:16:08

解决方案2
1 2013-07-18 02:28:27