Question

<script language="JavaScript">
function changeHistory(which) {
document.getElementById('maincontent').innerHTML="<iframe src='history.html' width='100%' height='100%' scrolling='auto'></iframe>";
}

function changeFigures(which) {
document.getElementById('maincontent').innerHTML="<iframe src='figures.html' width='100%' height='100%' scrolling='auto'></iframe>";
}
</script>


<li><a title="History" href="history.html" onclick="changeHistory(this); return false;">History</a></li>
<li><a title="Figures" href="figures.html" onclick="changeFigures(this); return false;">Figures</a></li>

Am I doing it right? How to NOT using different javascript methods for different link?

Is it possible to use variables in this problem?

Answer 1

You are already passing the html-element to the function with this inline-function, which I think works nice in this way.

onclick="changeHistory(this);

Now if you alter the function like this, you could use the html-element you’ve just passed to get the actual url, which is the ‘href’-attribute of that html-element.

<script language="JavaScript">
function changeIframe(htmlElement) {
  document.getElementById('maincontent').innerHTML = "<iframe src='" + htmlElement.href + "' width='100%' height='100%' scrolling='auto'></iframe>";
}
</script>


<li><a title="History" href="history.html" onclick="changeIframe(this); return false;">History</a></li>
<li><a title="Figures" href="figures.html" onclick="changeIframe(this); return false;">Figures</a></li>

Have fun!