Why does Copy button copy 'undefined' instead of copying value from html dom?

user_19800249 0
Viewed 67

I'm trying to make my own user script for https://mlwbd.ltd/movie/don-2022

I wish to copy the value of specified hidden input

preTag = document.getElementsByName("FU");
p = preTag[0];
console.log(p);

Ekra = document.getElementsByClassName("linktabs");
q = Ekra[0];
console.log(q);

function copy(ele) {
    let temp = document.createElement('textarea');
    document.body.appendChild(temp);
    temp.value = ele.textContent;
    temp.select();
    document.execCommand('copy');
    temp.remove();
}

btn = document.createElement("button");
btn.innerHTML = "copy"
btn.onclick = function(){
    copy("p");
};

q.insertBefore(document.createElement("br"), q.childNodes[0])
q.insertBefore(btn, q.childNodes[0])

The Html code is 

input type="hidden" name="FU" value="https://songslyric.site/links/46905/"
I want to copy the Value of name="FU" when I click the button. The code I pasted is created from google chrome snippets. Please help me.

tampermonkey userscripts javascript
2 Answers

This will get you started:

// ==UserScript==
// @name         mlwbd.ltd
// @namespace    http://tampermonkey.net/
// @version      0.1
// @match        https://mlwbd.ltd/movie/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    const $ = document.querySelector.bind(document);

    $('body').insertAdjacentHTML('beforeend', init_css() );

    setTimeout(() => {
        $('#mybutt').addEventListener('click', () => {
            //alert('hi');
            const fu = $('#download table form input[name=FU]');
            //console.log(fu.value);
            copy2clip(fu);
        });
    },500);


})();
function init_css(){
    return `
    <button id="mybutt">Copy2Clip</button>
    <style id="myInitCss">
        #mybutt{position:absolute;top:90px;left:45%;height:30px;width:120px;}
        #mybutt{background:#0073ea;color:white;padding-top:5px;text-align:center;}
        #mybutt{z-index:99999;}
    </style>
    `;
}
function copy2clip(ele) {
    let temp = document.createElement('textarea');
    document.body.appendChild(temp);
    temp.value = ele.value;
    temp.select();
    document.execCommand('copy');
    temp.remove();
}

Notes:

  1. Despite the $ character, this code is not jQuery (it is vanilla javascript)
  2. You can uncomment the alert() and console.log to see how things are working at that point.
user_14475090

Try this on your other question:

    // ==UserScript==
    // @name         adsgo.digital
    // @namespace    http://tampermonkey.net/
    // @version      0.1
    // @include        https://adsgo.digital/
    // @include        https://adsgo.digital/*
    // @grant        none
    // ==/UserScript==

    (function() {
        'use strict';
        const $ = document.querySelector.bind(document);

        $('body').insertAdjacentHTML('beforeend', init_css() );

        setTimeout(() => {
            $('#mybutt').addEventListener('click', () => {
                //alert('hi');
                const fu = $('.posts-dynamic.posts-container form input[name=FU6]');
                //console.log(fu.value);
                copy2clip(fu);
            });
        },500);


    })();
    function init_css(){
        return `
        <button id="mybutt">Copy2Clip</button>
        <style id="myInitCss">
            #mybutt{position:absolute;top:90px;left:45%;height:30px;width:120px;}
            #mybutt{background:#0073ea;color:white;padding-top:5px;text-align:center;}
            #mybutt{z-index:99999;}
        </style>
        `;
    }
    function copy2clip(ele) {
        let temp = document.createElement('textarea');
        document.body.appendChild(temp);
        temp.value = ele.value;
        temp.select();
        document.execCommand('copy');
        temp.remove();
    }

Notes:

  1. You can compare this answer to the previous one and you'll notice that only one line has changed.

  2. The topic to study to understand how to reference the HTML scaffolding as I did is called: "CSS Selectors". The JavaScript querySelector() directive uses CSS selectors to specifically target the desired HTML tag.

user_14475090
Related