Copy value from input field

Question

I need to copy the value from the input field to the clipboard. Instead of getting the value of the input field I get null.

Here is my Code:

<input type="text" value=${model.anchor_url} id=${properties.anchor_name}>
<button class="c-button" onclick="myFunction()">
    <span class="c-button__label">Copy</span>
</button>
<div data-sly-test="${model.anchor_url}">
    <p>URL from Model :</p>
    <pre>${model.anchor_url}</pre>
</div>

function myFunction() {
    const field = document.getElementById(`${properties.anchor_name}`);
    navigator.clipboard.writeText(field);
    alert("Copied the text to clipboard: " + field);
}

The value for field variable results null even though the id exist and it has a value.

Does this answer your question? [How do I copy to the clipboard in JavaScript?](https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) — Balastrong, Nov 12 '21 at 14:49
What is the value of `properties.anchor_name`? It looks like you've used the string `${properties.anchor_name}` as the ID of an input, rather than the variable's value. — mykaf, Nov 12 '21 at 14:50
properties.anchor_name is a variable and it has a value eg. Anchor1. I am not sure if that is what you asked. — Anuska, Nov 12 '21 at 14:54
`document.getElementById(properties.anchor_name)` should be your selector. There is no use for template literals here. — Lain, Nov 12 '21 at 14:56
I am not sure I understand your suggestion @Lain since ${properties.anchor_name} is a String value. — Anuska, Nov 12 '21 at 15:05
@Anuska In simple terms he is saying you don't need to put `$[}` — Aditya, Nov 13 '21 at 13:43

score 1 · Answer 1 · answered Nov 12 '21 at 15:30

1

You get an Object with this line: document.getElementById(${properties.anchor_name}). With the parameter value you will get the value from the input field.

So you have to try:

const field = document.getElementById(`${properties.anchor_name}`).value;

answered Nov 12 '21 at 15:30

Maik Lowrey

15,957
6
40
79

When I try as you suggested IntelliJ gives me a warning "Unresolved variable value" for .value – Anuska Nov 15 '21 at 06:39
@Anuska that is up to InteliJ itself. You can `/** * @param {{some_unres_var:string}} data */` suppress the message. Found at: https://stackoverflow.com/questions/20835544/how-to-fight-tons-of-unresolved-variables-warning-in-webstorm – Maik Lowrey Nov 15 '21 at 08:26

Aditya · Answer 2 · 2021-11-13T13:50:59.357

0

You are trying to copy the element, instead of it's Value, you have to get it's Value using element.value, also if the value of field variable is null, this means the Element you are trying to get doesn't exist with that Element ID

And also, you were trying to copy the whole element instead of it's value, So Replace the first line in your function with this one:

const field = document.getElementById(properties.anchor_name).value;

Also there is no need to put template literals in your code as you can do so without that too!

For example assume there is a variable element_ID which can be written in JS like this:

var element_ID = "myInput"

now i want to get that Element, so I can just directly do this:

document.getElementById(element_ID)

instead of this:

document.getElementById(`${element_ID}`)

edited Nov 13 '21 at 13:50

answered Nov 12 '21 at 14:53

Aditya

1,132
1
9
28

When I do it like you suggested I get in the console: Uncaught TypeError: Cannot read properties of null (reading 'value') – Anuska Nov 12 '21 at 14:56
I get `Uncaught TypeError: Failed to execute 'getElementById' on 'Document': 1 argument required, but only 0 present.` – Anuska Nov 12 '21 at 15:09
Sorry by mistake it was the wrong command, try this out ```document.getElementById(`${properties.anchor_name}`)``` – Aditya Nov 12 '21 at 15:13
No problem. That is when I get null for the field. – Anuska Nov 12 '21 at 15:24
This means you are trying to get an invalid element, the function `getElementById` returns null when it can't find the element, so check that you're trying to get the right element – Aditya Nov 13 '21 at 13:36

score 0 · Accepted Answer · answered Nov 15 '21 at 10:05

0

Thanks for all the help. It appears due to cross site scripting prevention JS can not be executed from html for the site I develop but has to be built using TypeScript.

answered Nov 15 '21 at 10:05

Anuska

51
13

1

How can TypeScript be executed but JavaScript can not? – JavaScript Nov 17 '21 at 07:32
I found out AEM JavaScript is loaded through clientlibs https://experienceleague.adobe.com/docs/experience-manager-65/developing/introduction/clientlibs.html?lang=en – Anuska Nov 17 '21 at 14:57

Copy value from input field

3 Answers3

Linked