How to access HTML DOM element javascript function to another javascript

Question

I want to ask that how I should code a Javascript function that on click to btn_1 main function should execute and during the execution of the main function, the sub-function append to the div which I have created in the main function.

   document.getElementById('btn_1').addEventListener('click', main);


   function subfunc(){

        const h1 = document.createElement('h1');
        h1.appendChild(document.createTextNode('it is working'));
        h1.id = 'heading';
        
    }
    function main(){
        const div = document.createElement('div');
        div.className = 'main-showcase'        
       
    }

call subfunc(div) in the main method

Harmandeep Singh Kalsi
– Harmandeep Singh Kalsi

2020-06-30 11:53:25 +00:00
Commented Jun 30, 2020 at 11:53 — Harmandeep Singh Kalsi
– Harmandeep Singh Kalsi, Commented Jun 30, 2020 at 11:53

T.J. Crowder · Accepted Answer · 2020-06-30 11:56:14Z

You have a few options:

Have the subfunc return the h1 element; have main call it to get the element and append it to the div:

function subfunc() {
    const h1 = document.createElement('h1');
    h1.appendChild(document.createTextNode('it is working'));
    h1.id = 'heading';
    return h1;
}
function main() {
    const div = document.createElement('div');
    div.className = 'main-showcase'        
    div.appendChild(subfunc());
}

Have main pass the div to subfunc and have subfunc do the appending:

function subfunc(div) {
    const h1 = document.createElement('h1');
    h1.appendChild(document.createTextNode('it is working'));
    h1.id = 'heading';
    div.appendChild(h1);
}
function main() {
    const div = document.createElement('div');
    div.className = 'main-showcase'        
    subfunc(div);
}

Or really there are probably several other approaches you could take, but those are the primary two that come to mind.

Collectives™ on Stack Overflow

How to access HTML DOM element javascript function to another javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related