Is there a way to create an onclick function that works for multiple ids? I have tried using it with one id and it works, but when I try it with other ids, it doesn't work. I am looking for a solution that allows me to use the same onclick function with the same ids in all div elements.
I need someone to write a single Javascript function with a single id to achieve the same result for all three buttons.
Please review my code below;
function copy() {
document.getElementById("label").innerHTML = document.getElementById("mySelect").value;
}.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class="dropdown">
<p id="label">Mouse over me</p>
<div class="dropdown-content">
<select id="mySelect">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<button onClick="copy();">Add</button>
</div>
</div>
<div class="dropdown">
<p id="label">Mouse over me</p>
<div class="dropdown-content">
<select id="mySelect">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<button onClick="copy();">Add</button>
</div>
</div>
<div class="dropdown">
<p id="label">Mouse over me</p>
<div class="dropdown-content">
<select id="mySelect">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<button onClick="copy();">Add</button>
</div>
</div>
</body>
</html>