making the link variable when loading an iFrame with JS

I want to load an HTML page into an iFrame with JS instead of using the usual iFrame target. Long story. That's just how I need it to be. My Javscript is

onclick = function buttonLife() {
    var el=document.getElementById("divContent");
    el.innerHTML="<iframe width=1024 height=702 scrolling=no name=bottomFrame frameborder=0 src=page.html></iframe>";
}

And my HTML is:

<a href="#" onclick="buttonLife();">BUTTON</a>;

And it works. But it loads a page already defined by the above java function. However, if I want to make the page I load into the iFrame variable for each button with the following HTML:

<a href="#" onclick="buttonLife('page2.html');">BUTTON2</a>

I know I need to change the have function to something like

onclick = function buttonLife() {
    var el=document.getElementById("divContent");
    el.innerHTML="<iframe width=1024 height=702 scrolling=no name=bottomFrame frameborder=0 src='link'></iframe>";
}

But it doesn't work. 开发者_如何学编程Help! Thanks

1. The function as you've created it doesn't accept any parameter; you're trying to pass it 'page2.html', but it doesn't expect this input.
2. You're also expecting the link variable to be automatically interpolated, but Javascript does not interpolate variables in strings. The solution instead is to concatenate the variable with the strings.
3. onclick = function buttonLife() probably does not do what you intend it to do; what it does is define a function, called buttonLife, and store it to a variable, called onclick. Instead you just want to create the function buttonLife().

Here's the function corrected to resolve the above issues:

function buttonLife( page ) {
    var el=document.getElementById("divContent");
    el.innerHTML="<iframe width=1024 height=702 scrolling=no name=bottomFrame frameborder=0 src='" + page + "'></iframe>";
}


<a href="#" onclick="buttonLife('page2.html');">BUTTON2</a>

MDN's guide to Javascript is a good basic introduction and will help you avoid these sorts of problems.

Try this:

function buttonLife(page_url)
{
  var el = document.getElementById("divContent");
  el.innerHTML = "<iframe width=1024 height=702 scrolling=no name=bottomFrame frameborder=0 src=" + page_url + "></iframe>";
}

Also, I recommend you to use:

<a href="javascript:buttonLife('page1.html')">BUTTON</a>;

So I took your code and tried it out in jsfiddle and it works fine: http://jsfiddle.net/ZK2VB/

I made the following changes:

• Removed the pointless onclick =
• Made it so you can pass the URL to the function in variable pageUrl
• Removed href="#" to so when you click the links it doesn't move the page
• I added the <div id="contentDiv">

But these are only cosmetic / to create the real-world implementation.

If you use the code as I am this should work, unless you have some other problem, like you redefined the function somewhere, or you're trying to call the function before it's defined.