个人中心
gpt4 book ai didi

javascript - 需要帮助在外部 js 文件中定义我的变量

转载 作者：行者123 更新时间：2023-12-01 16:25:21 25 4
gpt4 key购买 nike

嗨，我正在为我的一个类(class)项目做一个网站，它没什么特别的，但我无法定义我的变量，也不确定如何定义，因为我对此比较陌生，我一直在尝试使用不同的调用变量的方法，但它们不会定义，我不确定为什么我一直在使用括号，所以任何帮助将不胜感激

/*variables used in index.html document*/
var square = document.getElementById("square")
var clickMe = document.getElementById('clickMe');

/*What the button is suppose to do*/
function doDemo() {  
    var button = this;
    square.style.backgroundColor = "#ff4545";
    button.setAttribute("diabled", "true");
    setTimeout(clearDemo, 2000, button);
}
/*removes the attributes when you click the button again*/
function clearDemo (button) {
    var square = document.getElementById("square");
    square.style.backgroundColor = "transparent";
    button.removeAttribute("diabled");
}

clickMe.onclick = doDemo;
/* color for webpage*/
html{
    background: silver;
    }
/* setting for heading 1 */
h1{
    color: saddlebrown;
    font-family: Helvetica, sans-serif;
    text-align: center;
    font-size: 55px;
}
/* settings for heading 2 */
h2{
    font-size: 30px;
    color: #D2691E;
    font-family: Helvetica, sans-serif;
}
/* settings for the introduction line */
.intro{
    text-align: center;
    padding-bottom: 1em;
    font-family: arial;
    margin: auto;
    max-width: 1100px;
    line-height: 2;
    font-size: 20px;
   
    
}
/* settings for images */
.shake {
   display:block;
margin-left: auto;
    margin-right: auto;
    width: 30%;
}
/* settings for body structure */
.prime{
    padding-bottom: 1em;
    font-family: arial;
    margin-right: auto;
    max-width: 900px
}

#square{
    width: 100px;
    height: 100px;
    border: 2px inset gray;
    margin-bottom: 1em;
}


button{
    padding: .5em 2em;
}
<!DOCTYPE html>
<!-- will need to make java, and css files and link them-->
<html>
    <!--website title and attributes-->
<head>
    <title>Milkshakes</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="main.css">
    <script type="text/javascript" src="script.js"></script>
    </head>
<!-- make seprate class for each elment here-->
    <body>
        <h1>Milkshakes</h1>
        <!-- the div class for our images-->
        
        <div class="shake">
        <img src="images/milkshake_image_1.jpg" alt="image of a chocolate milkshake">
            </div>
        
        <!-- our div class for the introduction line-->
        <div class="intro">
        <p>When the sun is out and the heat is beating down on you there is nothing as good as a nice cool milkshake. they come in many varietys</p>
        </div>
        
        <!-- div class for our body structure-->
         <div class="prime">
        <h2>What is a milkshake</h2>
        
       <!-- intro sentence-->
        <p>A milkshake it is a nice cold drink made with milk and a flavor of your choosing and ice cream mixed until its nice and creamy.</p>
             
        <!-- start of body: section 1-->
        <h2>History of the milkshake</h2>
       
        
        <p>It was during the (1870's-1900's) there was 2 diffrent types of shakes a normal shake and a milkshake but they were very different from each other. the first milkshake made used whole milk, vanilla or stawberry and nutmeg and then you span it for 2 to 3 minutes, you get a frothy beverage that was very nice to drink. it is also belived to have started drive throughs.</p>
            
        <p> the way milkshakes use to be mixed was with a mechanical shakers they were built soley for mixing milkshakes and they took 2 to 3 minutes to mix a shake and the original flavours were chocolate, vanilla pineapple and coffee they were the main ones you would find there are others but they werent as common.</p>
            
             <!-- new section begins: section 2-->
        <h2>The best flavor of milkshake</h2>
            
            <p>now that is a question not so easily answered as everone has different opinons on which flavor is the best my favorite is chocolate or vanilla depends on my mood but for someone else that could be mint or strawberry so thats all on you as i can not tell you which is the best.</p>
            
             <!-- new section begins: section 3-->
            <h2>What is the perfect thickness</h2>
            
            <p>The 3 most common thicknesses you will hear about is thin,regular or thick. 
            </p>
            
            <!-- are list that we will make collapsable through java-->
            <ol>
            <li>thin its more of a liquid and light.</li>
            <li>regular its a nice consistency of light and thick.</li>    
            <li>thick which is my personal favorite it more along the lines of just being ice cream and its much heavier then the other 2.</li>
            </ol>
            
            <!-- sources for our milkshake stuff-->
            <h2>Sources</h2>
            <p>
                the art of drink:
                <a href="https://www.artofdrink.com/soda/history-of-the-milkshake">https://www.artofdrink.com/soda/history-of-the-milkshake</a></p>
        </div>
        
        <!-- our 2nd image-->
       <div class="shake">
        <img src="images/milkshake_image-2.jpg" width= "400px" alt="2nd image of a milkshake with different topings">
        </div>  
        
        <div id="square"></div>
        
        <button type="button" id="clickMe">Click Me</button>
        
        
        
    </body>
    

</html>

最佳答案

现代浏览器中最有效的方法是在脚本中使用 defer 属性标记头部的标记，这样您就可以将头部的单行代码更改为:

<script defer type="text/javascript" src="script.js"></script>

基本上这是最好的方法，因为解析就像我们将脚本放在 body 标记的末尾时一样完成，但总体而言，脚本执行早于完成，因为脚本已与 HTML 解析并行下载。使用 defer 可以让您两全其美:异步加载，但它会等到 DOM 准备就绪。

有一篇非常好的文章详细解释了每种 javascript 加载技术的效率。 here .

关于javascript - 需要帮助在外部 js 文件中定义我的变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62701357/

25 4 0
文章推荐： javascript - 测试函数以在 Jest 中抛出错误
文章推荐： sqlite - 将值设置为未知工资
文章推荐： java - 另一个 "Build path specifies execution environment JavaSE-13."问题
文章推荐： javascript - 如何在 navigator.permissions 中枚举支持的权限名称？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com