Bookmarklet JavaScript - add a character X to existing contents of web page element

Question

The code I have below does the copy and flashes a brief confirmation message. I need it to instead add a character X in front of existing contents of that web page element:

<< ? - if you don't know just walk on by, if you need clarification - ask

javascript:(function() {
    var copyText = document.getElementById("mergeFields-input-text");
    copyText.select();
    document.execCommand("Copy");

    tempAlert("COPIED SUBJECT", 500);
    function tempAlert(msg, duration) {
        var el = document.createElement("div");
        el.setAttribute("style","position:absolute;top:1%;left:35%;background-color:white;");
        el.innerHTML = msg;
        document.body.appendChild(el);

        setTimeout(function(){
                el.parentNode.removeChild(el);
            }, duration
        );
    }
})();

11.1.18 Version

javascript:(function() {
    var copyText = document.getElementById("mergeFields-input-text");
    copyText.innerHTML = "-" + copyText.innerHTML();

    tempAlert("ADDED", 500);
    function tempAlert(msg, duration) {
        var el = document.createElement("div");
        el.setAttribute("style","position:absolute;top:1%;left:35%;background-color:white;");
        el.innerHTML = msg;
        document.body.appendChild(el);

        setTimeout(function(){
                el.parentNode.removeChild(el);
            }, duration
        );
    }
})();

11.1.18 V2

javascript:(function() {
    var copyText = document.getElementById("mergeFields-input-text");
    copyText.value = "-" + copyText.value();

    tempAlert("ADDED", 500);
    function tempAlert(msg, duration) {
        var el = document.createElement("div");
        el.setAttribute("style","position:absolute;top:1%;left:35%;background-color:white;");
        el.innerHTML = msg;
        document.body.appendChild(el);

        setTimeout(function(){
                el.parentNode.removeChild(el);
            }, duration
        );
    }
})();

Something like `copyText.innerHTML = "X" + copyText.innerHTML;`? — Barmar, Sep 28 '18 at 20:15
@Barmar - where in my code above would that need to go or what to replace? — Alex, Nov 01 '18 at 18:42
I added a **11.1.18 Version** in my post above with your code. If that's what you meant - it does not do anything when tested — Alex, Nov 01 '18 at 19:43
`innerHTML` isn't a function, it's a property that contains the contents of a DOM element. This is really basic JavaScript any web developer should recognize. — Barmar, Nov 01 '18 at 19:48

Barmar · Answer 1 · 2018-11-01T20:46:52.670

0

innerHTML isn't a function, it's a property that contains the current contents of DOM element. So you shouldn't have () after it.

<a href='javascript:(function() {
    var copyText = document.getElementById("mergeFields-input-text");
    copyText.value = "-" + copyText.value;})()'>Click me</a>
<input id="mergeFields-input-text" value="initial contents">

edited Nov 01 '18 at 20:46

answered Nov 01 '18 at 19:50

Barmar

741,623
53
500
612

I took that code and put it through "Bookmarklet Creator", then put resulting code into a bookmarklet, but it does nothing – Alex Nov 01 '18 at 20:22
It works in my snippet, it's not obvious what you did differently. What kind of element is `mergeFields-input-text`? If it's an input field, you should use `.value` instead of `.innerHTML`. – Barmar Nov 01 '18 at 20:30
I don't know what Bookmarklet Creator is. When I google that I find many different sites, I don't know which one you used. – Barmar Nov 01 '18 at 20:31
I updated my post above under **11.1.18 V2** - that's the exact code I am now using when I put it through https://mrcoles.com/bookmarklet/ – Alex Nov 01 '18 at 20:42
I've updated my answer. I don't know what `tempAlert` is, and I left out all the other stuff that seems unrelated. – Barmar Nov 01 '18 at 20:48
`value` isn't a function, either, get rid of the parentheses after it. – Barmar Nov 01 '18 at 20:49
Your code after put through the link above does nothing. However, thanks for no parentheses advice - that does what I needed. However, the webpage where I am using it (DocuSign) treats the same action differently. i.e. if it's done via code vs manually. Via code it adds a character, but fails to recognize it's there. Manually, same character, page recognize it's there and acts the way I need it to. This is to compensate for DocuSign's changing envelope's name from file's name (desirable result) to template's name, once template is applied. tempAlert is a confirmation flash on the screen. – Alex Nov 02 '18 at 12:38
Is there any error in the JavaScript console when it fails? – Barmar Nov 02 '18 at 14:55
The code does not fail. The issue is how DocuSign page treats when code is run, vs when same action is performed manually, per description in my prior comment. I am not sure how you run your code. I make a bookmarklet out of it and execute it from favorites bar. – Alex Nov 02 '18 at 15:31
I just clicked on the link, I think that should be equivalent. But maybe there are ways to restrict what bookmarklets can do. – Barmar Nov 02 '18 at 15:37
Well, in this case webpage does allow bookmarklet to run the code, resulting in character added to the field, but it treats that being done by code differently than when same thing is done manually. I noticed similar issue in Excel's VBA in some instances. – Alex Nov 02 '18 at 15:51

Bookmarklet JavaScript - add a character X to existing contents of web page element

1 Answers1