Как передать значение переменной в модальное окно?
Мучаюсь, не могу передать значение переменной(скидку) в модальное окно...
Имеется счетчик для скидки, в нем в глобальную переменную попадает сама скидка -
let discount = (modalState, globalState) => {
console.log(modalState);
if (getCookie("disc")) {
var disc = parseFloat(getCookie("disc"));
console.log(disc);
var timer = setInterval(function () {
globalState.discount = disc;
console.log(globalState.discount);
if (modalState.modalChange) {
clearInterval(timer);
return true;
}
if (disc <= 100 && disc >= 0) {
disc -= 0.01;
setCookie("disc", disc.toFixed(2), {
secure: true,
"max-age": 86400,
});
jQuery("#disc-wid").text(disc.toFixed(2));
} else {
jQuery("#disc-wid").text(100);
console.log("Максимальная скидка");
clearInterval(timer);
return false;
}
}, 2000);
} else {
setCookie("disc", 0, { secure: true, "max-age": 86400 });
disc = 0;
var timer = setInterval(function () {
disc -= 0.01;
if (disc <= 100) {
setCookie("disc", disc.toFixed(2), {
secure: true,
"max-age": 86400,
});
jQuery("#disc-wid").text(disc.toFixed(2));
console.log(disc);
} else {
console.log("Максимальная скидка");
clearInterval(timer);
jQuery("#disc-wid").text(100);
return false;
}
}, 2000);
}
function setCookie(name, value, options = {}) {
options = {
path: "/",
};
//if (options.expires.toUTCString) {
// options.expires = options.expires.toUTCString();
//}
let updatedCookie =
encodeURIComponent(name) + "=" + encodeURIComponent(value);
for (let optionKey in options) {
updatedCookie += "; " + optionKey;
let optionValue = options[optionKey];
if (optionValue !== true) {
updatedCookie += "=" + optionValue;
}
}
document.cookie = updatedCookie;
}
function getCookie(name) {
let matches = document.cookie.match(
new RegExp(
"(?:^|; )" +
name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, "\\$1") +
"=([^;]*)"
)
);
console.log(matches);
return matches ? decodeURIComponent(matches[1]) : undefined;
}
};
export default discount;
Скидку необходимо вывести в форму модального окна:
const modals = (modalState, globalState) => {
function bindModal(triggerSelector, modalSelector, closeSelector) {
const trigger = document.querySelectorAll(triggerSelector),
modal = document.querySelector(modalSelector),
close = document.querySelector(closeSelector);
trigger.forEach((item) => {
item.addEventListener("click", (e) => {
if (e.target) {
e.preventDefault();
}
modalState.modalChange = true;
console.log(modalState.modalChange);
modal.querySelector('[name="id"]').value = globalState.discount;
modal.style.display = "block";
document.body.style.overflow = "hidden";
});
});
close.addEventListener("click", () => {
// modalState.modalChange = false;
modal.style.display = "none";
document.body.style.overflow = "";
});
modal.addEventListener("click", (e) => {
if (e.target == modal) {
modal.style.display = "none";
document.body.style.overflow = "";
}
});
}
bindModal(
".popup_engineer_btn",
".popup_engineer",
".popup_engineer .popup_close"
);
};
Сама форма:
const forms = (globalState) => {
const forma = document.querySelectorAll("form"),
inputs = document.querySelectorAll("input");
const message = {
loading: "Підвантаження...",
success: "Дякємо! В найближчий час ми Вам зателефонуємо.",
failure: "Щось пішло не так...",
};
const postData = async (url, data) => {
document.querySelector(".status").textContent = message.loading;
let res = await fetch(url, {
method: "POST",
body: data,
});
return await res.text();
};
const clearInputs = () => {
inputs.forEach((item) => {
item.value = discount.disc;
});
};
forma.forEach((item) => {
item.addEventListener("submit", (e) => {
e.preventDefault();
// obj.value = formState.formChange;
// console.log(obj.value);
let statusMessage = document.createElement("div");
statusMessage.classList.add("status");
item.appendChild(statusMessage);
console.log(statusMessage);
const formData = new FormData(item);
postData("assets/server.php", formData)
.then((res) => {
console.log(res);
statusMessage.textContent = message.success;
})
.catch(() => (statusMessage.textContent = message.failure))
.finally(() => {
clearInputs();
setTimeout(() => {
statusMessage.remove();
}, 5000);
});
});
});
};
export default forms;
Глобальная переменная в main:
window.addEventListener("DOMContentLoaded", () => {
("use strict");
const modalState = {
modalChange: false,
};
const globalState = {
discount: 0,
};
modals(modalState);
discount(modalState, globalState);
let deadLine = "2024-05-16";
forms(globalState);
timer(".container1", deadLine);
// stars();
});