Fatal编程技术网
  • javascript/
  • Javascript 为什么我的全局变量对象（window.[variable]）在本地工作，但不在浏览器中工作？

Javascript 为什么我的全局变量对象（window.[variable]）在本地工作，但不在浏览器中工作？

javascript html jquery

Javascript 为什么我的全局变量对象（window.[variable]）在本地工作，但不在浏览器中工作？,javascript,html,jquery,Javascript,Html,Jquery,初级开发人员： 目标：我想在一个JS文件（globalVariables.JS）中定义我的全局变量[对象数组），并从不同的JS（index.JS，products.JS）和HTML动态访问该全局变量的键值（index.html，products.html等）页面。我将在底部包括所有这些页面 本质上，在index.html和products.html上，我列出了我客户的产品，全局变量应该动态地填充所有这些信息 根据关于全局变量的部分，我应该能够这样声明变量： var carName = "

初级开发人员：

目标：我想在一个JS文件（globalVariables.JS）中定义我的全局变量[对象数组），并从不同的JS（index.JS，products.JS）和HTML动态访问该全局变量的键值（index.html，products.html等）页面。我将在底部包括所有这些页面

本质上，在index.html和products.html上，我列出了我客户的产品，全局变量应该动态地填充所有这些信息

根据关于全局变量的部分，我应该能够这样声明变量：

var carName = "Volvo";
然后像这样访问它：

console.log(window.carName)
意外结果：相反，浏览器中没有显示任何内容，看着控制台，我读到：

jQuery.Deferred exception: Cannot read property '0' of undefined TypeError: Cannot read property '0' of undefined
at HTMLDocument.<anonymous> (https://tiegrrr.com/testing/js/index.js:19:54)
at e (https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:30005)
at t (https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js:2:30307) undefined
…我在VS代码中遇到另一个错误：

',' expected.ts(1005)
我遗漏了什么？既然目录结构相同，为什么它只能在本地工作而不能在线工作

==================================================

所有文件

globalVariables.js

var allProducts = [
{
    name: 'TieGrrr Strap',
    img: 'tiegrrr-strap.jpg',
    desc: "TieGrrr Straps are the safest alternative to stretch and bungee cords. They quickly and securely hold cargo of almost any shape or size. Works great with ladder racks, pipe, lumber, kayaks, rafts, etc.",
    popularity:1,
    lengths: [3,6,9,12],
    colors: ["red","blue","orange","green"],
    breakStrengths: ["1,200 lbs"],
    cost: 5,
    tag:"tiegrrr",
    page: "tiegrrr-strap.html"
},
{
    name: 'Ratchet Strap',
    img: 'Ratchet-S-Hook.jpg',
    desc: '',
    popularity:2,
    lengths: [6,10,12,16],
    colors: ["red","blue","orange","green"],
    breakStrengths: ['1,500 lb.'],
    cost: 8,
    tag:"ratchet",
    page: "ratchet-strap.html"
},
{
    name: 'Heavy Duty Ratchet',
    img: 'heavy-duty-strap.jpg',
    desc: '',
    popularity:3,
    lengths: [6,10,12,16],
    colors: ["red","blue","orange","green"],
    breakStrengths: ['1,500 lb.','3,000 lb.'],
    cost: 10,
    tag:"heavy",
    page: "heavy-duty-ratchet.html"
},
{
    name: 'Load Hugger',
    img: 'load-hugger.jpg',
    desc: '',
    popularity:4,
    lengths: [6,10,12,16],
    colors: ["red","blue","orange","green"],
    breakStrengths: ['1,500 lb.'],
    cost: 15,
    tag:"hugger",
    page: "load-hugger.html"
},
{
    name: 'Super Duty Ratchet',
    img: 'SD Ratchet-F-Hook.jpg',
    desc: '',
    popularity:0,
    lengths: [6,10,12,16],
    colors: ["red","blue","orange","green"],
    breakStrengths: ['1,500 lb.'],
    cost: 12,
    tag:"super",
    page: "super-duty-ratchet.html"
},
{
    name: 'Winch Strap',
    img: 'winch-green.jpg',
    desc: '',
    popularity:0,
    lengths: [6,10,12,16],
    colors: ["red","blue","orange","green"],
    breakStrengths: ['1,500 lb.'],
    cost: 9,
    tag:"winch",
    page: "winch-strap.html"
},
{
    name: 'Universal Cam Strap',
    img: 'universal-strap1.jpg',
    desc: '',
    popularity:0,
    lengths: [6,10,12,16],
    colors: ["red","blue","orange","green"],
    breakStrengths: ['1,500 lb.'],
    cost: 6,
    tag:"uni",
    page: "universal-cam-strap.html"
},
{
    name: 'Endless Ratchet',
    img: 'endless-ratchet-strap.jpg',
    desc: '',
    popularity:0,
    lengths: [6,10,12,16],
    colors: ["red","blue","orange","green"],
    breakStrengths: ['1,500 lb.'],
    cost: 8,
    tag:"endless",
    page: "endless-ratchet-strap.html"
}

$(() => {


let $container = $('#item-container')

// TODO: make it so LOOP automatically filters for 1-4

for (i=0;i<4;i++) { // LOOPS through first 4

    $newITEM_div = $('<div>') // PARENT div for ITEM + IMG
    $newITEM_div.addClass("item")
    
    $newITEM_NAME_div = $('<div>') // div for ITEM NAME
    $newITEM_NAME_div.text(window.allProducts[i].name)
    $newITEM_NAME_div.addClass("item-name")

    $newITEM_IMG = $('<img>')
    $newITEM_IMG.css("background-image", `url('../testing/images/${window.allProducts[i].img}')`);

    $newITEM_div.append($newITEM_NAME_div)
    $newITEM_div.append($newITEM_IMG)
    $newITEM_div.attr('onclick',`location.href='./products/${window.allProducts[i].page}'`);
    $container.append($newITEM_div)
    
}
])

indes.js

var allProducts = [
{
    name: 'TieGrrr Strap',
    img: 'tiegrrr-strap.jpg',
    desc: "TieGrrr Straps are the safest alternative to stretch and bungee cords. They quickly and securely hold cargo of almost any shape or size. Works great with ladder racks, pipe, lumber, kayaks, rafts, etc.",
    popularity:1,
    lengths: [3,6,9,12],
    colors: ["red","blue","orange","green"],
    breakStrengths: ["1,200 lbs"],
    cost: 5,
    tag:"tiegrrr",
    page: "tiegrrr-strap.html"
},
{
    name: 'Ratchet Strap',
    img: 'Ratchet-S-Hook.jpg',
    desc: '',
    popularity:2,
    lengths: [6,10,12,16],
    colors: ["red","blue","orange","green"],
    breakStrengths: ['1,500 lb.'],
    cost: 8,
    tag:"ratchet",
    page: "ratchet-strap.html"
},
{
    name: 'Heavy Duty Ratchet',
    img: 'heavy-duty-strap.jpg',
    desc: '',
    popularity:3,
    lengths: [6,10,12,16],
    colors: ["red","blue","orange","green"],
    breakStrengths: ['1,500 lb.','3,000 lb.'],
    cost: 10,
    tag:"heavy",
    page: "heavy-duty-ratchet.html"
},
{
    name: 'Load Hugger',
    img: 'load-hugger.jpg',
    desc: '',
    popularity:4,
    lengths: [6,10,12,16],
    colors: ["red","blue","orange","green"],
    breakStrengths: ['1,500 lb.'],
    cost: 15,
    tag:"hugger",
    page: "load-hugger.html"
},
{
    name: 'Super Duty Ratchet',
    img: 'SD Ratchet-F-Hook.jpg',
    desc: '',
    popularity:0,
    lengths: [6,10,12,16],
    colors: ["red","blue","orange","green"],
    breakStrengths: ['1,500 lb.'],
    cost: 12,
    tag:"super",
    page: "super-duty-ratchet.html"
},
{
    name: 'Winch Strap',
    img: 'winch-green.jpg',
    desc: '',
    popularity:0,
    lengths: [6,10,12,16],
    colors: ["red","blue","orange","green"],
    breakStrengths: ['1,500 lb.'],
    cost: 9,
    tag:"winch",
    page: "winch-strap.html"
},
{
    name: 'Universal Cam Strap',
    img: 'universal-strap1.jpg',
    desc: '',
    popularity:0,
    lengths: [6,10,12,16],
    colors: ["red","blue","orange","green"],
    breakStrengths: ['1,500 lb.'],
    cost: 6,
    tag:"uni",
    page: "universal-cam-strap.html"
},
{
    name: 'Endless Ratchet',
    img: 'endless-ratchet-strap.jpg',
    desc: '',
    popularity:0,
    lengths: [6,10,12,16],
    colors: ["red","blue","orange","green"],
    breakStrengths: ['1,500 lb.'],
    cost: 8,
    tag:"endless",
    page: "endless-ratchet-strap.html"
}

$(() => {


let $container = $('#item-container')

// TODO: make it so LOOP automatically filters for 1-4

for (i=0;i<4;i++) { // LOOPS through first 4

    $newITEM_div = $('<div>') // PARENT div for ITEM + IMG
    $newITEM_div.addClass("item")
    
    $newITEM_NAME_div = $('<div>') // div for ITEM NAME
    $newITEM_NAME_div.text(window.allProducts[i].name)
    $newITEM_NAME_div.addClass("item-name")

    $newITEM_IMG = $('<img>')
    $newITEM_IMG.css("background-image", `url('../testing/images/${window.allProducts[i].img}')`);

    $newITEM_div.append($newITEM_NAME_div)
    $newITEM_div.append($newITEM_IMG)
    $newITEM_div.attr('onclick',`location.href='./products/${window.allProducts[i].page}'`);
    $container.append($newITEM_div)
    
}

$（（）=>{
设$container=$（“#项目容器”）
//TODO:使其成为1-4的自动循环过滤器

对于（i=0；i当您向窗口添加内容时，通常最好显式执行

因此，您的第二个解决方案可能是正确的，但语法错误，请尝试以下方法：


window.allProducts={objectValues、objectValues等}



没有
var
。创建变量时只需使用
var
，因为
窗口
已经存在，如果尝试创建它就会出错。
请正确检查
所有产品
变量的定义。似乎存在一些语法错误，不相关的代码太多，无法演示基本issueI会注意到，在将来@charlietfl-我想作为一名初级开发人员，我不确定您是否需要所有的.html来处理任何事情，但我可以看到这可能是TMI。没问题。我们知道这里有一个学习曲线，但我相当肯定，这可以用不到10行代码来总结，重点放在具体问题上手边。太多的噪音使讨论细节变得困难，并且需要比隔离可能发生问题的地方更大的努力。嗯，去掉
var
确实解决了ts（1005）错误，但我的控制台中仍然有
未定义的
。还有，为什么我收到了两张反对票？我能做些什么来改进未来的帖子吗？@JB444，你能试试这个，复制
globalVariables.js
的全部内容，并将其粘贴到浏览器控制台中，然后按enter键。这会产生任何错误吗？忽略那个讨厌的人，做你该做的。我在你的html页面中看不到index.js导入。请确保它包含在脚本标记中。@Wazeed-谢谢你的建议！用
窗口记录它。所有产品
按预期返回一个数组，但用
var allProducts
在控制台中记录它会返回
未定义的
！@cd3k-哦，我想我是这样做的ready在不同的.html页面上用这些行覆盖了它，这不起作用吗？

<head>
<title>TieGrrr Straps, Inc.</title>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="TieGrrr Straps, Inc.">
<meta name="description" content="Manufacturers of high quality tie-down systems at competitive prices.">
<meta name="keywords" content="tie downs, tie-downs, tie down straps, ratchet straps, straps, tie downs, tie down systems, tie down manufacturers">

<!-- BOOTSTRAP CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- TieGrrr Strap CSS -->
<link rel="stylesheet" type="text/css" href="css/styles.css">

<!-- add GOOGLE FONTS here-->
<link href="" rel="stylesheet"> <!-- ADD Google Font when ready-->

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- BOOTSTRAP JS -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<!-- SLICK carousel -->
<link rel="stylesheet" type="text/css" href="js/slick-1.8.1/slick/slick.css"/>
<!-- Add the new slick-theme.css if you want the default styling -->
<link rel="stylesheet" type="text/css" href="js/slick-1.8.1/slick/slick-theme.css"/>

<!-- JS for INDEX PAGE -->
<script src="js/globalVariables.js"></script>
<script src="js/index.js"></script>

</head>

<body>

<div class="container-fluid">

    <div class="row">
        <div id="top-thin-bar" class="col">800.810.8881 | sales@tiegrrr.com</div>
    </div>

</div>

<nav class="navbar sticky-top">
    <div id="main-logo" onclick="location.href='https\://tiegrrr.com'"></div>
    <div id="nav-info-content">
        <div id="main-logo-mobile" onclick="location.href='https\://tiegrrr.com'"></div>
        <div id="company-title">TieGrrr Straps, Inc.</div>
        <div id="subtitle">Manufacturers of Quality Tie-Down Systems</div>
        <div id="buttons">
            <div class="active" onclick="location.href='./index.html'">HOME</div>
            <div onclick="location.href='./products.html'">PRODUCTS</div>
            <div onclick="location.href='./about-us.html'">ABOUT US</div>
            <div onclick="location.href='./contact-us.html'">CONTACT</div>
        </div>
    </div>
    <div id="buttons-mobile"> <!-- starts out HIDDEN -->
        <div onclick="location.href='./index.html'">HOME</div>
        <div onclick="location.href='./products.html'">PRODUCTS</div>
        <div onclick="location.href='./about-us.html'">ABOUT US</div>
        <div onclick="location.href='./contact-us.html'">CONTACT</div>
    </div>
</nav>

<div class="container-fluid">

    <div class="row" id="landing-carousel">
        <div id="carousel-container" class="col">
            
            <div id="carousel-inner">

                    <!-- CHANGE which PICS in STYLES.CSS -- look for #on-sale-item- -->
                    <div id="on-sale-item-1"></div>
                    <div id="on-sale-item-2"></div>
                    <div id="on-sale-item-3"></div>
                    
                    <div id="on-sale-item-1"></div>
                    <div id="on-sale-item-2"></div>
                    <div id="on-sale-item-3"></div>

                    <div id="on-sale-item-1"></div>
                    <div id="on-sale-item-2"></div>
                    <div id="on-sale-item-3"></div>
                    
                    <div id="on-sale-item-1"></div>
                    <div id="on-sale-item-2"></div>
                    <div id="on-sale-item-3"></div>

                    <div id="on-sale-item-1"></div>
                    <div id="on-sale-item-2"></div>
                    <div id="on-sale-item-3"></div>
                    
                    <div id="on-sale-item-1"></div>
                    <div id="on-sale-item-2"></div>
                    <div id="on-sale-item-3"></div>

                    <div id="on-sale-item-1"></div>
                    <div id="on-sale-item-2"></div>
                    <div id="on-sale-item-3"></div>

                    <div id="on-sale-item-1"></div>
                    <div id="on-sale-item-2"></div>
                    <div id="on-sale-item-3"></div>
                    
                    <div id="on-sale-item-1"></div>
                    <div id="on-sale-item-2"></div>
                    <div id="on-sale-item-3"></div>

            </div>

        </div>
    </div>

</div>

<div class="container">
    <div class="row">
        <div class="col text-center" id="page-content">
                <div id="item-container"> <!-- use JAVASCRIPT to LOOP through -->
                    
                    <!-- index.js fills in with TOP 4 POPULAR ITEMS -->

                </div>
    
                <a href="./products.html" class="btn btn-outline-warning tiegrrr-button" role="button">View ALL PRODUCTS</a>
    
                <p style="color:white; font-size:x-large; font-style:italic; font-weight:800;">GET A GRIP</p>
                <p style="color:white; font-size:1.2em; font-weight:600;">We are a family-owned manufacturing company that aims to provide tie-down systems both superior in quality and price to that of any similar products carried by "big-box" stores.</p>
    
                <p style="color:white; font-size:1em;margin-bottom:3vh;">All of our products meet or exceed both D.O.T. and Web &Sling Assoc. standards for safety. Before we will sell any product, it must pass our field and/or lab test for "normal" abuse. Our products may cost as much as other disposable tie-downs, but they will outlast even the most expensive straps.</p>
    
                <p style="color:red; font-size:large; font-style:italic; font-weight:800;">AMERICAN OWNED</p>
                <img id="USAflag" src="./images/USA.jpg">
    
            </div>

    </div>
</div>                        

<div class="container-fluid">
    <div class="row">
        <div class="col" id="footer">
            Copyright © 2007 Tiegrrr Straps, Inc.
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/slick-1.8.1/slick/slick.min.js"></script>

<!-- SLICK carousel inline script -->
<script type="text/javascript">
    $('#carousel-inner').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 8000,
    });
</script>
</body>



<head>
<title>TieGrrr Straps, Inc. - Products</title>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="TieGrrr Straps, Inc.">
<meta name="description" content="Manufacturers of high quality tie-down systems at competitive prices.">
<meta name="keywords" content="tie downs, tie-downs, tie down straps, ratchet straps, straps, tie downs, tie down systems, tie down manufacturers">

<!-- BOOTSTRAP CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- TieGrrr Strap CSS -->
<link rel="stylesheet" type="text/css" href="css/styles.css">

<!-- add GOOGLE FONTS here-->
<link href="" rel="stylesheet"> <!-- ADD Google Font when ready-->

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- BOOTSTRAP JS -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<!-- JS for PRODUCTS PAGE -->
<script src="js/globalVariables.js"></script>
<script src="js/products.js"></script>

</head>

<body>

<div class="container-fluid">

    <div class="row">
        <div id="top-thin-bar" class="col">800.810.8881 | sales@tiegrrr.com</div>
    </div>

</div>

<nav class="navbar sticky-top">
    <div id="main-logo" onclick="location.href='https\://tiegrrr.com'"></div>
    <div id="nav-info-content">
        <div id="main-logo-mobile" onclick="location.href='https\://tiegrrr.com'"></div>
        <div id="company-title">TieGrrr Straps, Inc.</div>
        <div id="subtitle">Manufacturers of Quality Tie-Down Systems</div>
        <div id="buttons">
            <div onclick="location.href='./index.html'">HOME</div>
            <div class="active" onclick="location.href='./products.html'">PRODUCTS</div>
            <div onclick="location.href='./about-us.html'">ABOUT US</div>
            <div onclick="location.href='./contact-us.html'">CONTACT</div>
        </div>
    </div>
    <div id="buttons-mobile"> <!-- starts out HIDDEN -->
        <div onclick="location.href='./index.html'">HOME</div>
        <div onclick="location.href='./products.html'">PRODUCTS</div>
        <div onclick="location.href='./about-us.html'">ABOUT US</div>
        <div onclick="location.href='./contact-us.html'">CONTACT</div>
    </div>
</nav>

<div class="container-fluid">

    <!-- TODO: remove FLEX STYLES from ROW -->
    <div class="row">
        <div id="carousel-container" class="col">
            
            <div id="item-container"> 
                    
                <!-- PRODUCTS JS fills in -->

            </div>

        </div>

    </div>

</div>

<div class="container">
    <div class="row">
        <div class="col text-center" id="page-content">
            <div style="margin-top: 2.5vh;">
            
                <p style="color:white; font-size:x-large; font-style:italic; font-weight:800;">GET A GRIP</p>
                <p style="color:white; font-size:1.2em; font-weight:600;">We are a family-owned manufacturing company that aims to provide tie-down systems both superior in quality and price to that of any similar products carried by "big-box" stores.</p>
    
                <p style="color:white; font-size:1em;margin-bottom:3vh;">All of our products meet or exceed both D.O.T. and Web &Sling Assoc. standards for safety. Before we will sell any product, it must pass our field and/or lab test for "normal" abuse. Our products may cost as much as other disposable tie-downs, but they will outlast even the most expensive straps.</p>
    
                <p style="color:red; font-size:large; font-style:italic; font-weight:800;">AMERICAN OWNED</p>
                <img id="USAflag" src="./images/USA.jpg">
            
            </div>
        </div>
    </div>
</div>                        

<div class="container-fluid">
    <div class="row">
        <div class="col" id="footer">
            Copyright © 2007 Tiegrrr Straps, Inc.
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>

</body>