Проблема конкатенации HTML и javascript кода

Я пытаюсь добавить синтаксис HTML с помощью javascript и onClick, пытаясь передать функцию с двумя параметрами. Но при передаче параметров я делаю что-то неправильно в конкатенации. Пожалуйста, помогите. Вот код добавления.

addPanelHtml += "<li><a href='#' id='btnhistory" + i+ "' onclick='histDrpDwnEdt("+chkval+"','" + i+ ")'>History Parameters</a></li>";

при запуске программы получаю ошибку:

Uncaught SyntaxError: неожиданный конец ввода

Попробуйте, addPanelHtml += "<li><a href='#' id='btnhistory" + i + "'" + " onclick='histDrpDwnEdt("+chkval+"','" + i+ ")'>History Parameters</a></li>";

Engincan Veske 10.12.2020 10:05

какой твой addPanelHtml ? Можете ли вы предоставить больше кода, пожалуйста?

KienHT 10.12.2020 10:11

Я думаю, что ваша ошибка здесь: onclick='histDrpDwnEdt("+chkval+"','" + i+ ") вы должны удалить знаки одинарной кавычки вокруг запятой (если и chhval, и i являются числовыми значениями): onclick='histDrpDwnEdt("+chkval+"," + i+ ") или вы должны добавить один перед chval и один после i (если они являются строковыми значениями): onclick='histDrpDwnEdt('"+chkval+"','" + i+ "') .

secan 10.12.2020 10:40

... на самом деле, если chhval и i являются строковыми значениями, вы должны добавить одинарные кавычки и экранировать их: onclick='histDrpDwnEdt(\'"+chkval+"\',\'" +i+ "\')

secan 10.12.2020 10:56
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
4
109
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Я настоятельно рекомендую использовать строки шаблона в этом случае использования

Вот решение со строками шаблона

addPanelHtml += `<li><a href='#' id='btnhistory${i}' onclick='histDrpDwnEdt(${chkval}, ${i})'>History Parameters</a></li>`;

Затем вы можете избавиться от всех этих + " " + конкатенаций и просто использовать ${} для включения ваших переменных.

Это значительно улучшает читаемость вашего кода.

Здесь вы можете узнать больше о строках шаблона

Предложение хорошее, но введенная вами строка неверна; должно быть addPanelHtml += `<li><a href='#' id='btnhistory${i}' onclick='histDrpDwnEdt(${chkval}, ${i})'>History Parameters</a></li>`;

secan 10.12.2020 10:30

@developerExecutive, на самом деле это называется литералом шаблона или строкой шаблона (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… ‌​), как правильно упомянул Алекс, в то время как concat метод String.prototype ( developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…‌​) и не изменился в ES6. ;)

secan 10.12.2020 10:49

Попробуйте вместо 'попробуйте вот так\':

addPanelHtml += "<li><a href=\'#\' id=\'btnhistory" + i+ "\' onclick=\'histDrpDwnEdt("+chkval+"\',\'" + i+ ")\'>History Parameters</a></li>";

Мое предложение:

var addPanelHtml = '', i = 0, chkval = 1;

addPanelHtml += '<li><a href = "#" id = "btnhistory' + i + '" onclick = "histDrpDwnEdt(' + chkval + ', ' + i + ')">History Parameters</a></li>';

console.info(addPanelHtml);

Другие вопросы по теме