ТАК я пытаюсь изменить значение тега html в файле ejs на переменную, которую я объявил в файле JavaScript
let checkbox = document.querySelector('input[name = "plan"]');
checkbox.addEventListener('change', function () {
if (this.checked) {
document.querySelector('.plan-title').innerHTML = investment.name;
document.querySelector('.plan-description').innerHTML = investment.description;
}
else {
document.querySelector('.plan-title').innerHTML = '';
document.querySelector('.plan-description').innerHTML = '';
}
});
Поэтому, когда я передаю его напрямую, он отображается, но я хочу, чтобы он был динамическим, и хотя он проходит, когда я щелкаю флажок, он, похоже, не имеет никакого значения.
<%- include('../partials/sidebar'); %>
<% if (currentUser && currentUser.isAdmin){ %>
<a href = "/investment/new">Add New Plan</a>
<% } %>
<div class = "container">
<h1>Investments</h1>
<% investments.forEach((investment)=>{ %>
<div class = "col-md-4">
<div class = "card">
<strong>
<%= investment.name %>
</strong>
<h4>
<%= investment.min %> - <%=investment.max %>
</h4>
<p>
<%= investment.caption %>
</p>
<p><input type = "checkbox" name = "plan" id = "">Choose investment</p>
</div>
<% if (currentUser && currentUser.isAdmin){ %>
<a href = "/investment/<%= investment._id %>/edit">Edit</a>
<a href = "/investment/new">Delete</a>
<% } %>
</div>
<% }) %>
<% investments.forEach((investment)=>{ %>
<div class = "">
<div><strong>Package: </strong>
<p class = "plan-title">
</p>
</div>
<p class = "plan-description">
</p>
<input type = "number" name = "" id = "" min = "<%= investment.min %>"
max = "<%= investment.max %>">
</div>
<% }) %>
</div>
<%- include('../partials/footer'); %>
Я не могу пройти через это, нужна помощь, спасибо!
🤔 А знаете ли вы, что...
JavaScript обеспечивает обработку ошибок с использованием конструкции try...catch.
Мне непонятно, о какой переменной вы говорите, но любая переменная, которую вы установили в сценарии на стороне клиента, не будет доступна вам в файле EJS, который вы визуализируете на сервере. Серверный код Node.js и клиентский код JavaScript не знают друг друга.
Если я правильно понял, вы пытаетесь вставить значение переменной EJS в тег HTML из JavaScript, когда пользователь устанавливает флажок.
Значение тега HTML не меняется, потому что в вашем коде JS:
document.querySelector('.plan-title').innerHTML = investment.name;
document.querySelector('.plan-description').innerHTML = investment.description;
investment.name и investment.description не определены. Проверьте консоль на своей странице.
Это связано с тем, что вы пытались получить доступ к переменным EJS после завершения рендеринга страницы.
EJS в основном используется для передачи серверных переменных на страницу до ее отображения. Поэтому после рендеринга вы не можете получить доступ к этим переменным.
Итак, чтобы иметь значения этих переменных в вашем JavaScript после завершения рендеринга страницы, попробуйте сделать:
document.querySelector('.plan-title').innerHTML = '<%- investment.name %>';
document.querySelector('.plan-description').innerHTML = '<%- investment.description %>';
вместо. Вот как вы передаете переменную EJS в JavaScript. JavaScript теперь видит это как строку, и в этом нет проблем, в отличие от вашего кода, где он искал объект investment и возвращал значение undefined, поскольку эта переменная не определена на стороне клиента.
Кроме того, поскольку у вас есть цикл for-each в части HTML, я предполагаю, что вы пытаетесь изменить значения определенных элементов plan-title и plan-description. Если это так, '<%= investment.name %>' и '<%= investment.description %>' в части JavaScript также должны быть в цикле for-each, но это будет большой беспорядок.
Вместо этого я предлагаю вам прямо под циклом for-each в части HTML добавить класс в тег div в соответствии с индексом цикла for-each, добавить событие изменения в флажок и передать флажок и индекс цикл for-each для функции JavaScript, которая будет обрабатывать событие при изменении, включить переменные EJS в разделы plan-title и plan-description, а в функции JavaScript, которая обрабатывает событие изменения, изменить свойство отображения CSS с display: none на display: block для этих элементов div .
См. пример:
HTML:
<% investments.forEach((investment, index)=>{ %>
<div class = "col-md-4">
<div class = "card">
<strong>
<%= investment.name %>
</strong>
<h4>
<%= investment.min %> - <%=investment.max %>
</h4>
<p>
<%= investment.caption %>
</p>
<p><input onchange = "displayPlan(this, '<%= index %>')" type = "checkbox" name = "plan" id = "">Choose investment</p>
</div>
<% if (currentUser && currentUser.isAdmin){ %>
<a href = "/investment/<%= investment._id %>/edit">Edit</a>
<a href = "/investment/new">Delete</a>
<% } %>
</div>
<% }) %>
<% investments.forEach((investment, index)=>{ %>
<div class = "plan <%= index %>" style = "display: none;">
<div><strong>Package: </strong>
<p class = "plan-title">
<%- investment.name %>
</p>
</div>
<p class = "plan-description">
<%- investment.description %>
</p>
<input type = "number" name = "" id = "" min = "<%= investment.min %>"
max = "<%= investment.max %>">
</div>
<% }) %>
JavaScript:
function displayPlan(checkbox, id){
if (checkbox.checked) {
document.querySelector(`.plan.${id}`).style.display = 'block';
}
else {
document.querySelector(`.plan.${id}`).style.display = 'none';
}
}
Ваше здоровье!
Обновлено: проблемы с грамматикой и синтаксисом