javascript pass html input type id to function

Question

Suppose I have a list of the following HTML elements with a Javascript event to copy the content of the HTML input type text into the clipboard:

<input type="text" size="70" value="something1" id="v1">
<button onclick="CopyToClipboard('v1')">Copy command</button>

<input type="text" size="70" value="something2" id="v2">
<button onclick="CopyToClipboard('v2')">Copy command</button>

etc..

How do I copy the txt using javascript?

I am trying to tweak the code below but I can't figure out how to pass the HTML id to the javascript code. I know the getElementById() is not correct in that context and shouldn't be called. But I don't know how to carry the id value across into the Javascript function.

<script>
function CopyToClipboard(myInput) {
  /* Get the text field */
  var copyText = document.getElementById("myInput");

  /* Select the text field */
  copyText.select(myInput);

  /* Copy the text inside the text field */
  document.execCommand("copy");

  /* Alert the copied text */
  alert("Copied the text: " + copyText.value);
}
</script>

Any help would be greatly appreciated.

Thank you

Victor · Accepted Answer · 2019-05-29 11:21:10Z

1

The error is that you use document.getElementById("myInput") instead of document.getElementById(myInput).

answered May 29, 2019 at 11:21

Victor

5,7992 gold badges29 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bluz Over a year ago

I see! wasn't sure if it that function was refering to the variable itself or just its name. I didn't think much of it because I thought getElementById() was maybe not the right function to use in this context.Thank you.

Victor Over a year ago

@Bluz You're welcome! By the way, you do not need to pass any arguments to the select() function, so just use copyText.select().

Shubham Dixit · Accepted Answer · 2019-05-29 11:23:39Z

0

function CopyToClipboard(myInput) {
  /* Get the text field */
  var copyText = document.getElementById(myInput) // pass dynamic value here

console.log(copyText)
  /* Select the text field */
  copyText.select(myInput);

  /* Copy the text inside the text field */
  document.execCommand("copy");

  /* Alert the copied text */
  alert("Copied the text: " + copyText.value);
}

<input type="text" size="70" value="something1" id="v1">
<button onclick="CopyToClipboard('v1')">Copy command</button>

<input type="text" size="70" value="something2" id="v2">
<button onclick="CopyToClipboard('v2')">Copy command</button>

answered May 29, 2019 at 11:23

Shubham Dixit

9,2685 gold badges32 silver badges50 bronze badges

Collectives™ on Stack Overflow

javascript pass html input type id to function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related