Есть две основные проблемы. Во-первых, у меня возникают проблемы с отображением значения элемента, которое должно меняться в зависимости от выбранной кнопки. Предполагается, что innerHTML выбранного элемента h3 входит в sessionStorage при активации из исходного файла. Затем его значение отправляется в принимающий файл как переменная «ai», которая будет добавлена как элемент li в неупорядоченный список страницы. Второй проблемой является другая функция, которую выполняет кнопка в исходном файле. Его цель - предупредить, что товар был добавлен в корзину, но функция отображается только в jsfiddle, а не на glitch.com; где я создаю сайт. Я считаю, что это как-то связано с версией jquery, которую использует функция, или с исходным кодом. Любая помощь по любому из них очень ценится.
Вот исходный файл ...
Javascript / JQuery:
<script>
$(document).ready(function() {
var button = "none";
$(".button").click(function() {
button = $(this).attr("data-name");
alert(button);
});
});
function setWinHon() {
var i = document.getElementById("WinHon").innerHTML;
sessionStorage.setItem("item", i);
}
function setGolRod() {
var i = document.getElementById("GolRod").innerHTML;
sessionStorage.setItem("item", i);
}
function setMexPlu() {
var i = document.getElementById("MexPlu").innerHTML;
sessionStorage.setItem("item", i);
}
function setJasMin() {
var i = document.getElementById("JasMin").innerHTML;
sessionStorage.setItem("item", i);
}
function setCriTru() {
var i = document.getElementById("CriTru").innerHTML;
sessionStorage.setItem("item", i);
}
</script>
HTML:
</head>
<body>
<center>
<div id="text">
<div>
<div>
<h3 id="WinHon">Winter Honeysuckle $50</h3>
<ul style="list-style-type:none" class="align" align="left">
<li>Height:</li>
<li>Width:</li>
<li>Maintenance:</li>
<li>Environment:</li>
<li>Nomenclature:</li>
</ul>
<p class="div1">Lonicera fragrantissima is a species of flowering plant in the honeysuckle family known by the common names winter honeysuckle, fragrant honeysuckle, January jasmine, Chinese honeysuckle, kiss-me-at-the-gate, and sweet breath of spring.
<button class="button" type="button" onclick="setWinHon()" data-name="Winter Honeysuckle">Buy Now!</button></p>
</div>
<img src="https://cdn.glitch.com/9c36ac94-6707-41ee-a6b7-a39f46cd02e3%2FWinter%20Honeysuckle.jfif?1544561317954">
</div>
<div>
<div>
<h3 id="GolRod">Goldenrod $10</h3>
<ul style="list-style-type:none" class="align" align="left">
<li>Height:</li>
<li>Width:</li>
<li>Maintenance:</li>
<li>Environment:</li>
<li>Nomenclature:</li>
</ul>
<p class="div1">Solidago, commonly called goldenrods, is a genus of about 100 to 120 species of flowering plants in the aster family, Asteraceae. Most are
herbaceous perennial species found in open areas such as meadows, prairies, and savannas.
<button class="button" type="button" onclick="setGolRod()" data-name="Goldenrod">Buy Now!</button></p>
</div>
<img src="https://cdn.glitch.com/9c36ac94-6707-41ee-a6b7-a39f46cd02e3%2FGoldenrod.jpg?1544630990872">
</div>
<div>
<div>
<h3 id="MexPlu">Mexican Plum $30</h3>
<ul style="list-style-type:none" class="align" align="left">
<li>Height:</li>
<li>Width:</li>
<li>Maintenance:</li>
<li>Environment:</li>
<li>Nomenclature:</li>
</ul>
<p class="div1">Prunus mexicana, commonly known as the Mexican plum, is a North American species of plum tree that can be found in the central United States and
Northern Mexico. Its native range stretches from Coahuila and San Luis Potosí north as far as Wisconsin and South Dakota, east to Georgia,
Kentucky, and Ohio.
<button class="button" type="button" onclick="setMexPlu()" data-name="Mexican Plum">Buy Now!</button></p>
</div>
<img src="https://cdn.glitch.com/9c36ac94-6707-41ee-a6b7-a39f46cd02e3%2FMexican%20Plum.jfif?1544631101080">
</div>
<div>
<div>
<h3 id="JasMin">Jasmine $20</h3>
<ul style="list-style-type:none" class="align" align="left">
<li>Height:</li>
<li>Width:</li>
<li>Maintenance:</li>
<li>Environment:</li>
<li>Nomenclature:</li>
</ul>
<p class="div1">Jasmine is a genus of shrubs and vines in the olive family. It contains around 200 species native to tropical and warm temperate regions of
Eurasia, Australasia and Oceania. Jasmines are widely cultivated for the characteristic fragrance of their flowers.
<button class="button" type="button" onclick="setJasMin()" data-name="Jasmine">Buy Now!</button></p>
</div>
<img src="https://cdn.glitch.com/9c36ac94-6707-41ee-a6b7-a39f46cd02e3%2FJasmine.jpg?1544631121391">
</div>
<div>
<div>
<h3 id="CriTru">Crimson Trumpet $15</h3>
<ul style="list-style-type:none" class="align" align="left">
<li>Height:</li>
<li>Width:</li>
<li>Maintenance:</li>
<li>Environment:</li>
<li>Nomenclature:</li>
</ul>
<p class="div1">Lonicera sempervirens is a species of honeysuckle native to the eastern United States. It can grow in many areas due to its hardiness. It is most
often grown as a plant for wildlife. Ruby-throated hummingbirds use it in their natural range as well as other birds, butterflies, and bees.
<button class="button" id="button5" type="button" onclick="setCriTru()" data-name="Crimson Trumpet">Buy Now!</button></p>
</div>
<img src="https://cdn.glitch.com/9c36ac94-6707-41ee-a6b7-a39f46cd02e3%2FTrumpet%20Honeysuckle.jpg?1545705756174">
</div>
</div>
</center>
</body>
Вот корзина (получение файла) ...
<head>
<script>
function appendItems() {
var ai = sessionStorage.getItem("item");
ai = $("<li></li>").text("Text.");
$("ul").append(ai);
}
</script>
<div style="text-align:center;">
<h1>Shopping list</h1>
<p>So far you have ordered...</p>
</div>
</head>
<body>
<ul id="list">
<li></li>
</ul>
</body>
В корзине покупок должен быть элемент li, содержащий значение, вызываемое той кнопкой, которая выбрана, и выбранная кнопка должна выдавать предупреждение «имя растения» & «теперь добавлено в вашу корзину!». Однако в данный момент при нажатии кнопки ничего не происходит