#javascript #html
Вопрос:
Я создаю веб-приложение HTML и получаю все данные из вызовов API. Я поместил данные в массив и отобразил их с помощью функции map в javascript.
Мой набор данных, как показано ниже;
contDet = [
{
idappcontent: "Review1_Ques_01",
content:
'<img src="#FOLDERPATH#logo.png" style="width:600px;height: 150px">',
},
{
idappcontent: "Review1_Ques_02",
content:
'<div style="color:black;font-size:1.3em;text-align:center;"><p>Your Opinion Is Important To Us</p></div><div style="color: black; text-align: justify;font-size: 1em;line-height: 21px;margin-left: 3%;margin-right: 3%;"><p>Please take a moment to share with us your thoughts on your visit today.</p></div>',
},
{
idappcontent: "Review1_Ques_03",
content: '<ul data-role="listview" id="Review1_Ques_04">',
},
{
idappcontent: "Review1_Ques_06",
content:
'<a style="float: left;">< </a><a style="<a id="review1btn1" data-role="button" class="linkbtnPrevious" onclick="R1goPrevious()"><B>PREVIOUS</B></a><a style="float: right;">> </a> <a id="review1btn" data-role="button" class="linkbtnNext" onclick="goNext()"><B>NEXT</B></a>',
},
];
contImg = [
{ idclient: "11", idlocation: "25", ImageName: "highlightedStar.png" },
{ idclient: "11", idlocation: "25", ImageName: "star.png" },
];
surQue = [
{ idsurveyquestion: "22", question: "Taste of the food?" },
{ idsurveyquestion: "23", question: "Quality of the food?" },
{ idsurveyquestion: "24", question: "Speed Of delivery?" },
{ idsurveyquestion: "25", question: "The accuracy of the order?" },
{ idsurveyquestion: "26", question: "How is our service?" },
];
Мой вопрос в том, что у меня есть отображение изображений с помощью функции карты, и есть функция для onclick. Теперь мне нужно передать данные об элементе в функцию on-click.
Это то, что я пытался:
1.Файл Js
var starImgpath, highlightedStarImgpath;
function getData() {
contDet = [
{
idappcontent: "Review1_Ques_01",
content:
'<img src="#FOLDERPATH#logo.png" style="width:600px;height: 150px">',
},
{
idappcontent: "Review1_Ques_02",
content:
'<div style="color:black;font-size:1.3em;text-align:center;"><p>Your Opinion Is Important To Us</p></div><div style="color: black; text-align: justify;font-size: 1em;line-height: 21px;margin-left: 3%;margin-right: 3%;"><p>Please take a moment to share with us your thoughts on your visit today.</p></div>',
},
{
idappcontent: "Review1_Ques_03",
content: '<ul data-role="listview" id="Review1_Ques_04">',
},
{
idappcontent: "Review1_Ques_06",
content:
'<a style="float: left;">< </a><a style="<a id="review1btn1" data-role="button" class="linkbtnPrevious" onclick="R1goPrevious()"><B>PREVIOUS</B></a><a style="float: right;">> </a> <a id="review1btn" data-role="button" class="linkbtnNext" onclick="goNext()"><B>NEXT</B></a>',
},
];
contImg = [
{ idclient: "11", idlocation: "25", ImageName: "highlightedStar.png" },
{ idclient: "11", idlocation: "25", ImageName: "star.png" },
];
surQue = [
{ idsurveyquestion: "22", question: "Taste of the food?" },
{ idsurveyquestion: "23", question: "Quality of the food?" },
{ idsurveyquestion: "24", question: "Speed Of delivery?" },
{ idsurveyquestion: "25", question: "The accuracy of the order?" },
{ idsurveyquestion: "26", question: "How is our service?" },
];
//set content
document.getElementById("Review1_Ques_01").innerHTML = contDet[0].content;
document.getElementById("Review1_Ques_02").innerHTML = contDet[1].content;
document.getElementById("Review1_Ques_03").innerHTML = contDet[2].content;
document.getElementById("Review1_Ques_06").innerHTML = contDet[3].content;
//set star image path
//geting star img
var starImg = contImg.filter(function (item) {
return item.ImageName.includes("star");
});
starImgpath =
"./images/"
starImg[0].idclient
"/"
starImg[0].idlocation
"/"
starImg[0].ImageName;
//geting highlightedStar img
var highlightedStarImg = contImg.filter(function (item) {
return item.ImageName.includes("star");
});
highlightedStarImgpath =
"./images/"
highlightedStarImg[0].idclient
"/"
highlightedStarImg[0].idlocation
"/"
highlightedStarImg[0].ImageName;
document.getElementById("Que_list").innerHTML = surQue
.map(
(item) =>
`<div>
<p class="ques">${item.question}</P>
<div class="str">
<img onClick="rate()" class="star" id=1${item.idsurveyquestion} src=${starImgpath} />
<img onClick="rate()" class="star" id=2${item.idsurveyquestion}} src=${starImgpath} />
<img onClick="rate()" class="star" id=3${item.idsurveyquestion}} src=${starImgpath} />
<img onClick="rate()" class="star" id=4${item.idsurveyquestion}} src=${starImgpath} />
<img onClick="rate()" class="star" id=5${item.idsurveyquestion}} src=${starImgpath} />
</div>
</div>`
)
.join("");
}
function rate(item) {
console.log("working");
const { id } = event.target;
console.log(id);
for (i = 1; i <= 5; i ) {
if (parseInt(i item.idsurveyquestion) <= parseInt(id)) {
document
.getElementById(parseInt(i item.idsurveyquestion))
.setAttribute("src", highlightedStarImgpath);
} else {
document
.getElementById(parseInt(i item.idsurveyquestion))
.setAttribute("src", starImgpath);
}
}
}
Как я могу передать элемент в onClick=»оценить()» этой функции?
Комментарии:
1. Попробуй, ты использовал конкатенацию?
2. Я попробовал это с помощью onClick=»оценить(${товар})». Но это дает мне ошибку. «Неожиданный идентификатор»
Ответ №1:
surQue.map(
(item) =>
{
// Create the image element dynamically in the map function
var imageElement = document.createElement('img');
imageElement.addEventListener('click', function(){
rate(item);
});
// Once created the image element, you can append it to an
// existing div or any other element
var listElement = document.getElementById('Que_list');
listElement.innerHTML = imageElement;
}
);