I've built webpage with car results from query (for school purposes).
The results are sth like that: (it depends on user input ofc)
MAKE | MODEL | YEAR | TYPE | IMAGE
Audi | A4 | 2017 | Sedan | link
Audi | S8 | 2016 | Sedan | link
I would like an image to be shown when the link is clicked but to make query I need value of make, model and year of this row. In my code, these divs contain cars data
$(".result-item").append('<div class="value v-make">' + car.make + '</div>');
$(".result-item").append('<div class="value v-model">' + car.model + '</div>');
$(".result-item").append('<div class="value v-year">' + car.year + '</div>');
$(".result-item").append('<div class="value v-type">' + car.type + '</div>');
$(".result-item").append('<div class="value image-link"><a onclick="loadImg()">click</a></div>');
And the function of getting image is
Showing result in console.log() is temporary
function loadImg() {
var make, model, year;
const settings = {
"async": true,
"crossDomain": true,
"url": "https://bing-image-search1.p.rapidapi.com/images/search?q=" + make + "%20" + model + "%20" + year + "&count=1&mkt=pl-PL",
"method": "GET",
"headers": {
"x-rapidapi-host": "bing-image-search1.p.rapidapi.com",
"x-rapidapi-key": "*key*"
}
};
$.ajax(settings).done(function (response) {
console.log(response);
});
}
How do I get value of these divs to put it in variables in loadImg()?
Consider the following example.
$(function() {
function getCarImage(make, model, year) {
$.ajax({
async: true,
crossDomain: true,
url: "https://bing-image-search1.p.rapidapi.com/images/search",
data: {
q: make + " " + model + " " + year,
count: 1,
mkt: "pl-PL"
},
method: "GET",
header: {
"x-rapidapi-host": "bing-image-search1.p.rapidapi.com",
"x-rapidapi-key": "*key*"
},
success: function(results) {
console.log(results);
}
});
}
$("table tbody a").click(function(event) {
event.preventDefault();
var $self = $(this);
var $row = $self.closest("tr");
getCarImage($(".make", $row).text(), $(".model", $row).text(), $(".year", $row).text());
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>MAKE</th>
<th>MODEL</th>
<th>YEAR</th>
<th>TYPE</th>
<th>IMAGE</th>
</tr>
</thead>
<tbody>
<tr>
<td class="make">Audi</td>
<td class="model">A4</td>
<td class="year">2017</td>
<td class="type">Sedan</td>
<td><a href="#" class="getImage">Img Link</a></td>
</tr>
<tr>
<td class="make">Audi</td>
<td class="model">S8</td>
<td class="year">2016</td>
<td class="type">Sedan</td>
<td><a href="#" class="getImage">Img Link</a>
</tr>
</tbody>
</table>This binds a click event to each A element in the rows. When clicked, it gathers all the details and passes them to the function.
First of all, avoid the onclick passed as string in the HTML, and use proper event listening; this way you should already have all the data you need in the closure.
for (const car in cars) {
const link = document.createElement('a');
link.innerText = 'click';
link.addEventListener('click', () => {
// use car.make, car.year and so on
});
$(".result-item").append(link);
}