javascript - onclick 函数给了我“找不到变量：函数名”并且不起作用
问题描述
所以我有这段代码，当您单击一个段落时，它会将您链接到另一个 html 页面，简单的代码对吗？但它以某种方式不起作用，我想知道为什么。不起作用的功能是“tshirt”、“astronautcapa”和“capasmovel”，我觉得这很奇怪，因为它们与我所做的所有功能相同，并且在那里工作，但这些没有
网页：
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Nativus Clothing</title>
<meta name="description" content="An interactive getting started guide for Brackets.">
<link rel="stylesheet" href="main.css">
<script src ="shop.js" async>
</script>
</head>
<body>
<center>
<nobr style="font-family:cute; color: #4a7bb5;font-weight: 600;line-height: 0;font-size: 110px;"><img src="" alt="logo" style="width:150px;height:150px;vertical-align: middle" ></nobr>
</center>
<HR size=2 style="color: aqua"></HR>
<button class="button" onclick="mainpage();"><b>Home</b></button>
<div class="dropdown">
<button class="button" onclick="products();"><b>Produtos</b></button>
<div class="dropdown-content">
<a href="#" onclick="tshirt();">T-Shirts</a>
<a href="#" onclick="hoodies();">Hoodies</a>
<a href="#" onclick="capasmovel();">Capas de telemovel</a>
</div>
</div>
<button class="button"><b>Personalização</b></button>
<div class="dropdown">
<button class="button"><b>Sobre nós</b></button>
<div class="dropdown-content">
<a href="#" onclick="empresa();">Empresa</a>
<a href="#" onclick="capasmovel();">Artistas</a>
</div>
</div>
<img src="shopping_cart.png" alt="carrinho" style="width:40px;height:40px;float:right;margin-right: 100px" onclick="gotocarrinho();" >
<HR size=2 style="color: #002366"></HR>
<div class="card">
<img src="nave.png" alt="nave t-shirt" style="width:100%;height: 300px">
<p class="product_name" onclick="tshirt_world();">T-Shirt World</p>
<p class="price">14.99€</p>
</div>
<div class="card">
<img src="et.png" alt="et t-shirt" style="width:100%;height: 300px">
<p class="product_name" onclick="tshirt_et();">T-Shirt ET</p>
<p class="price">14.99€</p>
</div>
<div class="card">
<img src="astronaut.png" alt="astronaut t-shirt" style="width:100%;height: 300px">
<p class="product_name" onclick="tshirt_astronaut();">T-Shirt Astronaut</p>
<p class="price">14.99€</p>
</div>
<div class="card">
<img src="astronaut_case.png" alt="astronaut t-shirt" style="width:100%;height: 300px">
<p class="product_name" onclick="astronaut_capa();">Capa Iphone XR Astronaut</p>
<p class="price">9.99€</p>
</div>
</body>
JavaScript：
function mainpage(){
window.location = "index.html"
}
function products(){
window.location = "products.html"
}
function tshirt() {
window.location = "tshirtsproducts.html"
}
function astronaut_capa(){
window.location = "astronaut_case.html"
}
function capasmovel() {
window.location = "cases_products.html"
}
var removeCartItensButton = document.getElementsByClassName('btn-danger');
console.log(removeCartItensButton.length)
for(var i = 0; i<removeCartItensButton.length; i++){
var button = removeCartItensButton[i]
button.addEventListener('click', removeCartItem)
}
var quantityInputs = document.getElementsByClassName('quantity')
for(var i = 0; i<quantityInputs.length; i++){
var input = quantityInputs[i]
input.addEventListener('change', quantityChanged)
}
var addToCartButtons = document.getElementsByClassName('adicionar_carrinho')
for(var i = 0; i<addToCartButtons.length; i++){
var button = addToCartButtons[i]
button.addEventListener('clicked',addToCartClicked())
}
function getSize() {
var size = ""
if( document.getElementById('xs').className = "clicked_size_button"){
size = xs
}
if( document.getElementById('s').className = "clicked_size_button"){
size = s
}
if( document.getElementById('m').className = "clicked_size_button"){
size = m
}
if( document.getElementById('l').className = "clicked_size_button"){
size = l
}
if( document.getElementById('xl').className = "clicked_size_button"){
size = xl
}
return size
}
function addToCartClicked(event){
var product = document.getElementsByClassName('product_name')[0].innerText
var price = document.getElementsByClassName('price')[0].innerText
var size = document.getElementsByClassName('clicked_size_button')[0].innerText
var info = [product,size,price];
console.log(info)
localStorage.setItem("names", JSON.stringify(info));
}
function reloadShoppingCart()
{
var storedInfo = JSON.parse(localStorage.getItem("names"));
var cartRow = document.createElement('div');
cartRow.classList.add('rTableRow')
var cartItems = document.getElementsByClassName('rTable')[0]
cartRow.innerHTML = cartRows
cartItems.append(cartRow)
}
function quantityChanged(event)
{
var input = event.target
if(isNaN(input.value) || input.value <= 0){
input.value = 1;
}
updateCartTotal()
}
function removeCartItem(event){
var ButtonCliked = event.target
ButtonCliked.parentElement.parentElement.remove()
updateCartTotal()
}
function updateCartTotal(){
var cartItemContainter = document.getElementsByClassName('rTable')[0]
var cartRows = cartItemContainter.getElementsByClassName('rTableRow')
var total = 0
for(var i = 0; i<cartRows.length; i++){
var cartRow = cartRows[i]
var priceElement = cartRow.getElementsByClassName('cart-price')[0]
var quantityElement = cartRow.getElementsByClassName('quantity')[0]
console.log(priceElement,quantityElement)
var price = parseFloat(priceElement.innerText.replace("$",""))
var quantity = quantityElement.value
total = total + (price * quantity)
}
total = Math.round ( total * 100 ) / 100
document.getElementsByClassName('total')[0].innerText = "Total: " + total + "€";
}
function SizeButtonStyle(el) {
if(el.id == 'xs'){
document.getElementById('xs').className = "clicked_size_button";
document.getElementById('s').className = "unclicked_size_button";
document.getElementById('m').className = "unclicked_size_button";
document.getElementById('l').className = "unclicked_size_button";
document.getElementById('xl').className = "unclicked_size_button";
}
if(el.id == 's'){
document.getElementById('xs').className = "unclicked_size_button";
document.getElementById('s').className = "clicked_size_button";
document.getElementById('m').className = "unclicked_size_button";
document.getElementById('l').className = "unclicked_size_button";
document.getElementById('xl').className = "unclicked_size_button";
}
if(el.id == 'm'){
document.getElementById('xs').className = "unclicked_size_button";
document.getElementById('s').className = "unclicked_size_button";
document.getElementById('m').className = "clicked_size_button";
document.getElementById('l').className = "unclicked_size_button";
document.getElementById('xl').className = "unclicked_size_button";
}
if(el.id == 'l'){
document.getElementById('xs').className = "unclicked_size_button";
document.getElementById('s').className = "unclicked_size_button";
document.getElementById('m').className = "unclicked_size_button";
document.getElementById('l').className = "clicked_size_button";
document.getElementById('xl').className = "unclicked_size_button";
}
if(el.id == 'xl'){
document.getElementById('xs').className = "unclicked_size_button";
document.getElementById('s').className = "unclicked_size_button";
document.getElementById('m').className = "unclicked_size_button";
document.getElementById('l').className = "unclicked_size_button";
document.getElementById('xl').className = "clicked_size_button";
}
}
function gotocarrinho(){
window.location = "shopping_card.html"
}
解决方案
javascript:tshirt();在href中使用
<a href="javascript:tshirt();">T-Shirts</a>
推荐阅读
- c++ - VSCode 在构建之前不显示错误
- python - matplotlib 中的 Python 轴缩放
- android - Android Recycler View（网格布局管理器）
- php - Laravel 8：多选选项发送空请求
- php - 是的，我在 wordpress edit.php 中面临一个问题
- http - 请求标头中的 Sec-Fetch-Mode、Sec-Fetch-Dest、Sec-Fetch-Site 创建 CORS 问题
- google-sheets - 计算相关复选框
- python - 在 VSCode 中运行脚本时找不到 bson 模块，在终端的相同 conda 环境中工作正常
- html - 烧瓶 | HTML 不呈现通过 render_template 发送的数据
- google-cloud-firestore - Firestore add 为两个文档生成相同的文档 ID？