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>';
}
2 answers
solution1
1 2013-07-18 02:16:08
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.
solution2
1 2013-07-18 02:28:27
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.