Change content when link is clicked, 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.

Here's the 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:

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

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

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

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

Do you have a return between and
in the `innerHTML` statement? Javascript doesn't like those. Either make it all one line, or make it `document.getElementById("about").innerHTML='
Header am I.
' + '
Paragraph am I and too.
';` with the
line on a new line. — Luke Shaheen, Jul 18 '13 at 02:13
Yes, there are 2: "Uncaught SyntaxError: Unexpected token ILLEGAL" pointing to the script.js, and "Uncaught ReferenceError: mish is not defined" — damon, Jul 18 '13 at 02:14
Your code works in jsfiddle with script in head or body: http://jsfiddle.net/zj5ds/ — superEb, Jul 18 '13 at 02:14
@superEb's answer works here. You have two things (potentially) wrong - if you aren't already, you need to place all your HTML in ``, and the multiple line thing that I referenced. Also, @superEb, as a point of note, adding `javascript:` inside `onclick` attributes is repetitive. `onclick` can only fire javascript. — Luke Shaheen, Jul 18 '13 at 02:18
@John - Good point about `javascript:` - this is a misused relic from IE days: http://stackoverflow.com/questions/372159/do-you-ever-need-to-specify-javascript-in-an-onclick — superEb, Jul 18 '13 at 02:24
I've edited to show the whole head section. @John, I've tried using your formatting from the first comment, and I no longer get the first console error, but it still says "mish is not defined" whenever I click on the link. Also, yes, all the code is within the body, I just didn't want to add more html than necessary. — damon, Jul 18 '13 at 02:30
I would say break it down and include the function in the Script tag of the Head and see what happens. If it works move your function to external JS. — Learner, Jul 18 '13 at 02:39
I tried it in the head, and it works there. So I guess the real problem here is, why isn't it recognizing the external .js file? — damon, Jul 18 '13 at 02:42
Also, don't just copy paste code from external resource and post it here if it doesn't work as it's not the problem in the code but with putting together the bits and pieces from someone's site. check this: http://www.tizag.com/javascriptT/javascript-innerHTML.php — Learner, Jul 18 '13 at 02:44
please copy the exact same code from your JS file. CTRL+A and CTRL+C and then CTRL+V here. — Learner, Jul 18 '13 at 02:45
Okay, I've updated the post with an exact copy of what my external js file looks like — damon, Jul 18 '13 at 02:53
Replace '
Header am I.
'+ '
Paragraph am I and too.
'; } with '
Header am I.
Paragraph am I and too.
' not that it makes huge difference but just to make it clear and you don't need + anyways. — Learner, Jul 18 '13 at 03:04
IT WORKS! Though I'm not sure why because it is now exactly like I had it originally... Thank all of you so much! — damon, Jul 18 '13 at 03:12
Can't be exact same. Something has obviously changed. You can mark my answer if you think it helped. — Learner, Jul 18 '13 at 03:19

Learner · Answer 1 · 2013-07-18T02:50:35.990

You have posted fragments of the code without showing us the full 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:

   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. You do not need this. And then save this JS file exactly where your HTML file is.

And last include this in you head section:

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

And, this has to work.

Make sure document.getElementById("about").innerHTML = '
Header am I.
Paragraph am I and too.
'; is all in one line. No line breaks in the string. As I see in your posted sample you have line break after H2 tag. — Learner, Jul 18 '13 at 02:35

score 1 · Answer 2 · answered Jul 18 '13 at 02:16

1

The common practice in writing multi-line strings in JavaScript is the following. Presently you have a newline within the string (not escaped), which is not allowed in 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.

answered Jul 18 '13 at 02:16

matt3141

4,303
1
19
24

This, and making sure the HTML is in the `` tag. – Luke Shaheen Jul 18 '13 at 02:18
@John I think the undefined error he had was entirely due to the parse error but I can't be sure. – matt3141 Jul 18 '13 at 02:20
I've formatted it like this and it still does not work, and I'm still getting the same errors in the console. It's doubly frustrating because I see it working in the jsfiddle above, AND I have a previous model that is still working. I'm not sure how else I can explain this problem. – damon Jul 18 '13 at 02:26
This common practice is outdated, nowadays browsers handle string concatenation well, no need for the array join trick. http://stackoverflow.com/questions/51185/are-javascript-strings-immutable-do-i-need-a-string-builder-in-javascript/4717855#4717855 – Ruan Mendes Jul 18 '13 at 02:43
1

@JuanMendes That was not the inspiration for the practice, it was to make clearer multi-line strings. You'll see many of the leaders of the field using this method, similar to use of `["...", "..."].join("/")` in node.js – matt3141 Jul 18 '13 at 02:50
@matt3141 I see, that makes sense. I wouldn't have thought of that because inserting newlines in generated markup makes it harder to read and i didn't realize that was what the OP was trying to do – Ruan Mendes Jul 18 '13 at 08:48

Change content when link is clicked, Javascript

Header am I.

Header am I.

Header am I.

2 Answers2

Header am I.