<table>
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr>
    <td>three</td>
    <td>four</td>
  </tr>
</table>

<div id="numbers">
  <iframe name="letters" src="">
  </iframe>
</div>

I'd like to have the ability to click on any cell in the table, grab the value inside, show the div and append the iframe src based on the cell's value. When the user clicks on the cell again the iframe bees blank and the div is hidden.

For example: click cell one, show the div with the iframe src="/one.html". Click it again, hide the div with a blank iframe.

Thanks in advance!

(Please, no jQuery answers.)

<table>
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr>
    <td>three</td>
    <td>four</td>
  </tr>
</table>

<div id="numbers">
  <iframe name="letters" src="">
  </iframe>
</div>

I'd like to have the ability to click on any cell in the table, grab the value inside, show the div and append the iframe src based on the cell's value. When the user clicks on the cell again the iframe bees blank and the div is hidden.

For example: click cell one, show the div with the iframe src="/one.html". Click it again, hide the div with a blank iframe.

Thanks in advance!

(Please, no jQuery answers.)

• javascript
• iframe

• document.querySelector('iframe').src='http://y-u-no-search.internet'; – c69 Commented Jan 5, 2012 at 0:16

3 Answers 3

Without adding an id to the iframe use this:

document.getElementsByTagName("iframe")[0].src="http://example./";

Or based on the name:

document.getElementsByName("letters")[0].src="http://example./";

If you would add a id:

<iframe name="letters" id="letterframe" src="" />

document.getElementById("letterframe").src="http://example./";

It should be something like below.Call this function on onclick event of td and pass desired src in parameter.

  <script type=”text/javascript”>
    function changeURL(srcvalue)
    {
    document.getElementById('letters').src=srcvalue;
    }
    </script>

Added ids to some of the HTML elements.

<table id="table">
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr>
    <td>three</td>
    <td>four</td>
  </tr>
</table>

<div id="numbers">
  <iframe id="iframe" name="letters" src="">
  </iframe>
</div>

And the javascript

document.getElementById('table').onclick=function(e){
  e = e || window.event;
  e=e.target || e.srcElement;
  if(e.tagName.toLowerCase()=='td'){
    var page = e.innerHTML,iframe=document.getElementById('iframe');
    if(iframe.src.indexOf(page)>-1){
      document.getElementById('numbers').style.display='none';
    }
    else{
      document.getElementById('numbers').style.display='block';
      iframe.src='/'+page+'.html';
    }
  }
}