HTML/JS that doesn't display properly

Applications Web Development
1

Hi. I have some problematic HTML and/or JS.

Here's some JS.

<script>
const links = {
    link1: 'http://somesite.com',
}
 
let currentIframeId;
// top left red button to close the full page iframe
const closeBtn = document.createElement('button');
closeBtn.classList.add('close-btn')
closeBtn.onclick = handleCloseIFrame
closeBtn.innerText = 'close'

function handleLinkClick(index) {
    currentIframeId = index;
    const link = links[index]
    const iframe = document.createElement('iframe')
  iframe.src = link
  iframe.width = '567'
  iframe.height = '392'
  iframe.classList.add('full-page-iframe', index)
  document.body.appendChild(iframe)
  setCloseBtVisibility(true)
}
 
// control the visibility of the close button
function setCloseBtVisibility(visible) {
    if(visible) {
    document.body.appendChild(closeBtn)
  }else {  
   document.body.removeChild(closeBtn);
  }
}  
 
function handleCloseIFrame() {
    const iframe = document.querySelector(`.${currentIframeId}`);
  document.body.removeChild(iframe)
  setCloseBtVisibility(false)  
}
</script>

And.. The HTML

                <div class="section-6-container section-container section-container-image-bg" id="section-6">
                         <meta http-equiv="Content-Type" content="text/html; charset=IBM437">
                         <input id="clickMe" type="button" value="BBS Terminal" onclick="handleLinkClick('link1');" >

No matter where I put this HTML, it always displays at the bottom of the page. I'd like it to directly display it beneath the "BBS Terminal" button.

Could someone take a look at this, and tell me what i'm doing wrong, or lead me in the right direction?

TIA.

2

Merry Christmas @ignatius ,

The issue lies in how the iframe and the closeBtn are being dynamically appended to the document's <body> rather than being appended as siblings to the "BBS Terminal" button (or its parent container). By default, appending elements to the <body> causes them to appear at the very end of the document.

To fix this and ensure that the iframe and closeBtn appear directly beneath the "BBS Terminal" button, you need to append the iframe and closeBtn to a container that's close to the button in the DOM hierarchy.

3

Merry Christmas.

Which iframe are you referring to? I can't seem to find one within that section of the HTML.

Thank you. I hope you're having a good Christmas. And at least having a good turkey or ham. :slight_smile:

4

In the code you posted the iframe is created in the JS:

const iframe = document.createElement('iframe')

:slight_smile:

Maybe review some docs, like this one @ignatius ....

See Also: HTML DOM IFrame Object

5

Sorry for the late reply. But, that doesn't seem to work either. Using
const iframe = document.createElement('iframe') as a frame. You know what? I'll just leave it the way it is. If I get serious visiters to my website, that want to use the terminal, then so be it.. What if they don"? So be it.

Thanks go again to Neo.

6

The issue isn’t that you’re using this as your iframe, @ignatius. :blush:

const iframe = document.createElement('iframe')

The problem lies in how you’re attaching the iframe to the DOM. Specifically, your code attaches the iframe to the body element:

document.body.appendChild(iframe)

This means the iframe will appear at the bottom of the page, as the body represents the entire document.

To position the iframe as you intend, you need to attach it to the appropriate HTML element.

I shared links to basic DOM manipulation earlier so you can explore and understand this better. It’s not rocket science, @ignatius, but if you’re using JavaScript to manipulate DOM objects, it’s essential to grasp what the DOM is and how JavaScript interacts with it.

Something like this might work, instead of appending the iframe to the body (incorrectly):

closeBtn.append('iframe`)

However, I want you @ignatius to make the change and progress yourself, so I'm not going to rewrite your javascript completely. The required change is too simple does not require a lot of work if you understand the basics.

Also, do not forget to use the developers console in your browser. There, you can click on any element to get the DOM "address" (location), check JS vars, etc.