I am using a third-party script to draw the player on my page.

The author of the script suggests to insert HTML into the page like this:

div id= "yohoho" data-title= "Coco's Secret" >
/div >
script src= "//yohoho.cc/yo.js"><
/script >

What am I doing?

export const Kino= ()= >
    const [title, setTitle]= React.useState (undefined);
    return (
div >
div id= "batya" >
/div >
                type= "text"
                placeholder= "Search"
                value= {title}
                onChange= {(e)= >
setTitle (e.target.value)}
button onClick= {()= >
                const el= document.querySelector ("# yohoho")
                const batya= document.querySelector ("# batya")
                el? .remove ()
                const newY= document.createElement ('div')
                newY.id= "yohoho"
                newY.dataset.title= title
                newY.dataset.player= "collaps, kodik, hdvb, bazon, ustore, alloha, pleer, videospider, videocdn, trailer"
                newY.dataset.separator= ","
                batya? .appendChild (newY)
                Start ()
            }} >
Search <
/button >
/div >

The Start () function calls the initializing function in the yo.js script

What is the problem? The player appears, but nothing happens when you press the player switch buttons. At the same time, if you insert the code (suggested by the developer) simply into the HTML markup, everything works fine and the buttons are pressed. I suspect that the problem is in React, and for some reason he does not want to register click on buttons. The screenshot shows the buttons on the right.

What am I doing wrong and why the players are not changing?

  • Answer # 1

    Would show a page with a demo. Try to wrap this div with another one like this< div > < div id= "batya" > < /div > < /div >