Question

我正在学习javascript，遇到了一些麻烦。我想使用链接到JS函数的按钮单击来生成照片...而且我看不到我的代码有什么问题，当我单击“生成”按钮时，它会出现上述错误。我不断收到Uncaught TypeError：每次尝试生成图片时都无法设置null错误消息的属性'src'。

代码在下面给出

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="C:\Users\minur\Desktop\JavaScript CrashCourse\Challenge 1\css\style.css">
    <title>Javascript on Steroids</title>
</head>
<body>
    <div class = "container-1">

        <h2>Challenge 1: Your Age in Days<h2>

        <div class = "flex-box-container-1">

             <div> 
                <button class="btn btn-primary" onclick="ageInDays()">Click me</button>
            </div>

            <div>
                <button class="btn btn-danger" onclick="reset()">reset</button> 
            </div>
        </div>

        <div class="flex-box-container-1">
            <div id="flex-box-result"></div>
        </div>
    </div>

    <div class="Container-2">
        <h2>Challenge 2: Cat Generator</h2>
        <button class="btn btn-success" id="cat-generator" onclick="generateCat()"> Generate Cat</button>

        <div class="flex-box-container-2" id="flex-Cat-Gen">

        </div>
    </div>


    <script src = 'C:\Users\minur\Desktop\JavaScript CrashCourse\Challenge 1\js\script.js'></Script> 
</body>
</html>

//--------------js functions------------------------------

function ageInDays(){
     var birthYear = prompt("What year were you born friend...?");
     var ageInDayss = (2020 - birthYear)*365;
     var h1 = document.createElement('h1');
     var textAnswer = document.createTextNode('You are '+ ageInDayss + ' days old');
        h1.setAttribute('id','ageInDays');
        h1.appendChild(textAnswer);
        document.getElementById('flex-box-result').appendChild(h1);
}

function reset(){
    document.getElementById('ageInDays').remove();
}


function generateCat(){
    var image = document.getElementById('img');
    var sm = document.getElementById('flex-Cat-Gen');
    image.src = 'https://media.giphy.com/media/13CoXDiaCcCoyk/giphy.gif';
    sm.appendChild(image);

}

Answer 1

没有带有 id图片的img元素。

现在在内部生成cat函数，动态创建元素的方式与在ageInDays函数中创建的方式相同。

function ageInDays(){
     var birthYear = prompt("What year were you born friend...?");
     var ageInDayss = (2020 - birthYear)*365;
     var h1 = document.createElement('h1');
     var textAnswer = document.createTextNode('You are '+ ageInDayss + ' days old');
        h1.setAttribute('id','ageInDays');
        h1.appendChild(textAnswer);
        document.getElementById('flex-box-result').appendChild(h1);
}

function reset(){
    document.getElementById('ageInDays').remove();
}


function generateCat(){
    if(document.getElementById('cat') === null){
    let image = document.createElement('img');
    image.id="cat";
    let sm = document.getElementById('flex-Cat-Gen');
    image.src = 'https://media.giphy.com/media/13CoXDiaCcCoyk/giphy.gif';
    sm.appendChild(image);
  }
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="C:\Users\minur\Desktop\JavaScript CrashCourse\Challenge 1\css\style.css">
    <title>Javascript on Steroids</title>
</head>
<body>
    <div class = "container-1">

        <h2>Challenge 1: Your Age in Days<h2>

        <div class = "flex-box-container-1">

             <div> 
                <button class="btn btn-primary" onclick="ageInDays()">Click me</button>
            </div>

            <div>
                <button class="btn btn-danger" onclick="reset()">reset</button> 
            </div>
        </div>

        <div class="flex-box-container-1">
            <div id="flex-box-result"></div>
        </div>
    </div>

    <div class="Container-2">
        <h2>Challenge 2: Cat Generator</h2>
        <button class="btn btn-success" id="cat-generator" onclick="generateCat()"> Generate Cat</button>

        <div class="flex-box-container-2" id="flex-Cat-Gen">

        </div>
    </div>

</body>
</html>

script.js：21未捕获的TypeError：无法将属性'src'设置为null

1 个答案: