function myFunction() {
  var copyText = document.getElementById("1");
  var copyText = document.getElementById("2");
  copyText.select();

  navigator.clipboard.writeText(copyText.value);

  alert("Copied the text: "   copyText.value);
}

<select id="1">
  <option>Apple</option>
  <option>Carrot</option>
</select>
<select id="2">
  <option>Fruit</option>
  <option>Vegetable</option>
</select>

<button onclick="myFunction()">Copy text</button>

When Apple and Fruit is selected in the drop down, and click Copy text button, my clipboard will have "Apple/Fruit"

I can't figure it out. Please help.

CodePudding user response：

Let's start with what's wrong:

1. you are reusing the same variable copyText for both elements, hens only the last element will be available in that variable.
2. as the error shows, element select (which is delcared into copyText variable) doesn't have function select()
3. you are trying copy to clipboard a value from a single element

So, to minimally fix your code you'll need declare two different variables for your elements, and combine values from both into one:

function myFunction() {
  var copyText1 = document.getElementById("1");
  var copyText2 = document.getElementById("2");

  var value = copyText1.value   "/"   copyText2.value;
  navigator.clipboard.writeText(value);

  alert("Copied the text: "   value);
}

<select id="1">
     <option>Apple</option>
     <option>Carrot</option>
</select>
<select id="2">
     <option>Fruit</option>
     <option>Vegetable</option>
</select>

<button onclick="myFunction()">Copy text</button>