How to access the child of an iframe?-CodePudding

I'm trying to access the element inside the iframe but nothing works. I've tried:


    var iframe = document.getElementById('authorizenet-ccNumber');
    
    var iframe = document.querySelector("#card-number");

    var iframe = document.getElementById("authorizenet-ccNumber");

    var element =iframe.contentWindow.document.getElementById('card-number');

but nothing works. This is the source of the iframe:

I've tried this too but doesn't works as I did not reach the input:

    var iframe = document.getElementById('authorizenet-ccNumber');
    iframe.children
    
    iframe.children[0]

CodePudding user response：

You have a typo getElementsById('card-number') => getElementById('card-number')

CodePudding user response：

Syntax

element.children

Return Value

Type	Description
Object	The collection of element nodes. The elements are sorted as they appear in the document

var iframe = document.getElementById('authorizenet-ccNumber').children;
console.log("List Of iframe children",iframe);

CodePudding user response：

var iframe = document.getElementById('authorizenet-ccNumber');

This will give you the iframe's parent div, as that is where the id is situated in your HTML. If you want to access the iframe, you could give it an id, or you could access the parent div first, and then access its child element.

var iframe = document.getElementById('authorizenet-ccNumber').firstChild;