英文:
localStorage.setItem doesn't work with <img> tag
问题
我有一个JS函数，它从我的字典的特定字段中读取数据，并将读取的值设置到与它们相关联的标签上的新页面。
const good_render = id => {
localStorage.setItem("name", goods[id].name);
localStorage.setItem("price", goods[id].price);
localStorage.setItem("img", goods[id].img);
};
我使用以下方式应用这些值：
<script>
document.getElementById("name").textContent = localStorage.getItem("name");
document.getElementById("price").textContent = localStorage.getItem("price");
document.getElementById("img").src = localStorage.getItem("img");
</script>
它可以正常使用.textContent，但使用.src时出现问题。可能的问题是什么？
=更新=
简要来说，必须按下按钮才能跳转到产品页面。
产品页面本身：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="slider\itc-slider.css">
<link rel="stylesheet" href="good_page.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<h1 class="header1" id="name"></h1>
</div>
<div class="container">
<div class="itc-slider" data-slider="itc-slider">
<div class="itc-slider-wrapper">
<div class="itc-slider-items">
<div class="itc-slider-item">
<img src="slider\examples\images\1.jpg">
</div>
<div class="itc-slider-item">
<img src="slider\examples\images\2.jpg">
</div>
<div class="itc-slider-item">
<img src="slider\examples\images\3.jpg">
</div>
<div class="itc-slider-item" id="img">
<img src="slider\examples\images\4.jpg">
</div>
</div>
</div>
<button class="itc-slider-btn itc-slider-btn-prev"></button>
<button class="itc-slider-btn itc-slider-btn-next"></button>
</div>
</div>
<div>
<div class="header1" id="price"></div>
<div>
<button class="button-3" role="button" id="cart">Add to cart</button>
</div>
</div>
<script src="slider\itc-slider.js" defer></script>
<script>
document.getElementById("name").textContent = localStorage.getItem("name");
document.getElementById("price").textContent = localStorage.getItem("price");
document.getElementById("img").src = localStorage.getItem("img");
</script>
</body>
</html>
执行的JS：
var goods = {
"good1": {
"name": "good1",
"price": 100,
"img": "https://static.winestreet.ru/off-line/goods_file/46001/file_S.jpg",
"in_store": 1
},
"good2": {
"name": "good2",
"price": 50,
"img": "https://pitersmoke.ru/wa-data/public/shop/products/90/15/11590/images/18550/18550.970.jpg",
"in_store": 1
}
};
document.onclick = event => {
if (event.target.id == 'good1') {
good_render(event.target.id);
}
if (event.target.id == 'good2') {
good_render(event.target.id);
}
};
const good_render = id => {
localStorage.setItem("name", goods[id].name);
localStorage.setItem("price", goods[id].price);
localStorage.setItem("img", goods[id].img);
};
英文:
I got a JS function that reads from specific field of my dict and set the read values on new page to the tags they are related to.
const good_render = id => {
localStorage.setItem("name", (goods[id].name));
localStorage.setItem("price", (goods[id].price));
localStorage.setItem("img", (goods[id].img))};
I apply these values this way:
<script>
document.getElementById("name").textContent = name = localStorage.getItem("name");
document.getElementById("price").textContent = price = localStorage.getItem("price");
document.getElementById("img").src = img = localStorage.getItem("img")
</script>
It works perfectly fine with .textContend, however with .src it doesn't. What might be the problem?
=Update=
Briefly, a button must be pressed so to travel to a product page
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="main_2_buttons.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="../good_page/good_page.html" class="button-34" id="good1">good 1</a>
<a href="../good_page/good_page.html" class="button-34" id="good2">good 2</a>
<script src="main_2_buttons.js"></script>
</body>
</html>
The product page itself
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="slider\itc-slider.css">
<link rel="stylesheet" href="good_page.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<h1 class="header1" id = "name"></h1>
</div>
<div class="container">
<div class="itc-slider" data-slider="itc-slider">
<div class="itc-slider-wrapper">
<div class="itc-slider-items">
<div class="itc-slider-item">
<img src = "slider\examples\images\1.jpg">
</div>
<div class="itc-slider-item">
<img src = "slider\examples\images\2.jpg">
</div>
<div class="itc-slider-item">
<img src = "slider\examples\images\3.jpg">
</div>
<div class="itc-slider-item" id ="img">
<img src = "slider\examples\images\4.jpg">
</div>
</div>
</div>
<button class="itc-slider-btn itc-slider-btn-prev"</button>
<button class="itc-slider-btn itc-slider-btn-next"</button>
</div>
</div>
<div> <!--class="nl l1n"-->>
<div class="header1" id = "price"></div>
<div>
<button class="button-3" role="button" id="cart">Add to cart</button>
</div>
</div>
<script src="slider\itc-slider.js" defer></script>
<script>
document.getElementById("name").textContent = name = localStorage.getItem("name");
document.getElementById("price").textContent = price = localStorage.getItem("price");
document.getElementById("img").src = img = localStorage.getItem("img")
</script>
</body>
</html>
And the executed JS
var goods = {
"good1" : {
"name" : "good1",
"price": 100,
"img" : "https://static.winestreet.ru/off-line/goods_file/46001/file_S.jpg",
"in_store": 1,
},
"good2" : {
"name" : "good2",
"price": 50,
"img" : "https://pitersmoke.ru/wa-data/public/shop/products/90/15/11590/images/18550/18550.970.jpg",
"in_store": 1,
}
};
document.onclick = event => {
if (event.target.id == 'good1') {
good_render(event.target.id);
}
if (event.target.id == 'good2') {
good_render(event.target.id);
}
};
const good_render = id => {
localStorage.setItem("name", (goods[id].name));
localStorage.setItem("price", (goods[id].price));
const imgURL = URL.createObjectURL(goods[id].img);
localStorage.setItem("img", imgURL);
};
答案1
得分: 0
document.getElementById("img") 返回根据您的HTML问题而言的div元素，所以要么将id设置为您的img标签，而不是div，或者执行以下操作：
var myDivEle = document.getElementById("img"); // 这是一个<div>而不是<img />
myDivEle.getElementsByTagName('img')[0].src = localStorage.getItem("img");
英文:
document.getElementById("img") returns div element as per your HTML in question, so either set id to your img tag instead of div or do:
var myDivEle = document.getElementById("img"); //its a <div> not <img />
myDivEle.getElementsByTagName('img')[0].src = localStorage.getItem("img");
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论