I have a table and 10 rows When I copy this image src. It copied the last src
HTML
<table >
<tbody>
@foreach($medias as $media)
<tr>
<td >{{ $media->id }}</td>
<td ><img src="{{ asset('storage/'.$media->image) }}" alt="image" width="100" height="50"></td>
<td >
<form action="{{ route('admin.medias.destroy', $media->id) }}" method="post">
@csrf
@method('DELETE')
<button type="submit" >del</button>
</form>
</td>
<td ><a onclick="copy(this)" >copy</a></td>
</tr>
@endforeach
</tbody>
</table>
JS
<script>
function copy () {
navigator.clipboard.writeText(document.getElementsByClassName('image').src);
}
</script>
I copied undefined.
Note: This code has no errors in the output.
CodePudding user response：
You cannot repeat Id inside DOM. So you can set up id dynamically, btw you need to pas the element to your copy().
Try the next code and let me know if it is working. I didn't test it, but it should work
Blade
<table >
<tbody>
@foreach($medias as $media)
<tr>
<td >{{ $media->id }}</td>
<td ><img src="{{ asset('storage/'.$media->image) }}" id="image-{{$media->id}}" alt="image" width="100" height="50"></td>
<td >
<form action="{{ route('admin.medias.destroy', $media->id) }}" method="post">
@csrf
@method('DELETE')
<button type="submit" >del</button>
</form>
</td>
<td ><a onclick="copy('image-{{$media->id}}')" >copy</a></td>
</tr>
@endforeach
</tbody>
</table>
JS
<script>
function copy (element) {
navigator.clipboard.writeText(document.getElementsById(element).src);
}
</script>
CodePudding user response：
Example A is more true to the OP layout. Example B was started before the question was updated. One important thing you should remember is that you cannot have any identical #ids they must be unique, so img#image is img.image in the examples.
Details are commented in both examples
Example A
// Bind the <tbody> to the click event
document.querySelector('tbody').onclick = copyPath;
function copyPath(e) {
// Stop link from jumping
e.preventDefault();
// Reference the link user clicked
const clk = e.target;
/*
If the tag user clicked has .copy class...
...find the closest <tr> from clk...
...then find .image in <tr>...
...get .image src value and add it to clipboard
*/
if (clk.matches('.copy')) {
const image = clk.closest('tr').querySelector('.image');
navigator.clipboard.writeText(image.src);
}
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<main class='container'>
<section class='row'>
<div class='col'>
<table >
<tbody>
<tr>
<td ></td>
<td ><img class='image' src="https://placem.at/places?w=100&h=50&random=1&txt=1&txtclr=fc0" alt="image" width="100" height="50"></td>
<td >
<form action="about:blank" method="post">
<button >Delete</button>
</form>
</td>
<td ><a href='!#' >Copy Image Path</a></td>
</tr>
<tr>
<td ></td>
<td ><img class='image' src="https://placem.at/places?w=100&h=50&random=2&txt=2&txtclr=fc0" alt="image" width="100" height="50"></td>
<td >
<form action="about:blank" method="post">
<button >Delete</button>
</form>
</td>
<td ><a href='!#' >Copy Image Path</a></td>
</tr>
<tr>
<td ></td>
<td ><img class='image' src="https://placem.at/places?w=100&h=50&random=3&txt=3&txtclr=fc0" alt="image" width="100" height="50"></td>
<td >
<form action="about:blank" method="post">
<button >Delete</button>
</form>
</td>
<td ><a href='!#' >Copy Image Path</a></td>
</tr>
</tbody>
</table>
</div>
</section>
<section class='row'>
<div class='col'>
<textarea class='form-control' rows='3' cols='50' placeholder='Paste Here'></textarea>
</div>
</section>
</main>Example B
// Collect <figure> into an array
const frames = [...document.querySelectorAll('figure')];
// On each <figure>...
frames.forEach(fig => {
// Get the src of <img>
let path = fig.firstElementChild.src;
// Reference the <a>
let link = fig.lastElementChild.firstElementChild;
// Add data-src attribute with the value of path to the link
link.setAttribute('data-src', path);
});
// Bind the click event to <section>
document.querySelector('section').onclick = copyPath;
function copyPath(e) {
// Stop link from jumping
e.preventDefault();
// Reference the link user clicked
const clk = e.target;
/*
If the tag clicked has attribute [data-src]...
...add the link's data-src value to clipboard
*/
if (clk.hasAttribute('data-src')) {
navigator.clipboard.writeText(clk.dataset.src);
}
}section {
display: flex;
justify-content: center;
align-items: center;
margin: 10px
}
figure {
margin: 0
}
figcaption {
text-align: center;
}<h3>Click a link then right click <u>P</u>aste or <kbd>Ctrl/⌘</kbd> <kbd>v</kbd> to the <code><textarea></code> below:</h3>
<section>
<figure>
<img src='https://placem.at/places?w=160&h=90&random=1&txt=1&txtclr=fc0'>
<figcaption><a href='!#'>Image Source</a></figcaption>
</figure>
<figure>
<img src='https://placem.at/places?w=160&h=90&random=2&txt=2&txtclr=fc0'>
<figcaption><a href='!#'>Image Source</a></figcaption>
</figure>
<figure>
<img src='https://placem.at/places?w=160&h=90&random=3&txt=3&txtclr=fc0'>
<figcaption><a href='!#'>Image Source</a></figcaption>
</figure>
</section>
<textarea rows='3' cols='65' placeholder='Paste Here'></textarea>