进度栏项目的“样式”未定义未捕获类型错误

问题描述

我是Java的新手，我已经通过一些教程和项目来熟悉Java语言。我在此链接上找到了一个由“ dcode”提供的Progress-Bar教程：https://www.youtube.com/watch?v=QxQRtwAtqKE我一直在关注，但是我的Java脚本代码似乎出现了一个错误，而讲师却没有。 / p>

似乎在Javascript部分的update函数的style方法中。我尝试重新排列更新函数的位置（将其放置在setValue（）的上方），以为可能无法读取它的放置位置。但这似乎不起作用。我按照本教程进行操作，所以我不太确定自己怎么弄错了。有什么我想念的吗？

这是我进行一些编辑的代码： JavaScript代码：

// JavaScript source code

//creating a class for the progess bar (HP bar)
class ProgressBar {
    contructor(element,initialValue = 0) { 
        this.valueElem = element.querySelector('.HP-value');
        this.fillElem = element.querySelector('.HP-bar-fill');

        this.setValue(initialValue);

        //console.log(this.valueElem);
        //console.log(this.fillElem);
    }

    setValue(newValue) {
        if (newValue < 0) {
            newValue = 0;
        }

        if (newValue > 100) {
            newValue = 100;
        }

        this.value = newValue;
        this.update();
    }

    update() {
        const percentage = this.value + '%'; // 50%

        this.fillElem.style.width = percentage;  //Error displays for me here but not the instructor.
        this.valueElem.textContent = percentage;
        
        
    }
}


const pb1 = new ProgressBar(document.querySelector('.HP'),80); 
//calls the value from user to display the new percentage. 
//In this case it should go from 50% to 80%.

body
{
}

.HP {
    position: relative;
    width: 300px;
    height: 40px;
    border: 2px solid black;
}

.HP-bar-fill {
    height: 100%;
    background: #36ed1a;
    transition: width 0.5s;
}

.HP-value {
    position: absolute; /*float above the nearest parent positioned element*/
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: bold;
}

<!DOCTYPE html>
<!--Create your own progress bar in HTML,CSS,and Javascript | Web development tutorial-->
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>HealthBar</title>
</head>
<body>
    <h1>Your HP</h1>
    <div class="HP">
        <div class="HP-value">50%</div>
        <div class="HP-bar-fill"></div>

    </div>


    <script src="js/script.js"></script>
</body>
</html>

解决方法

在您的JS中，您为“构造函数”打了一个错字。您将其称为“构造函数”，因为它从未被调用，您的 this.fillElem.style.width = percentage;引发未定义，因为JS不知道fillElem来自何处，而其本身是未定义的。因此，在您的JS代码中修复该构造函数拼写错误：

//creating a class for the progess bar (HP bar)
class ProgressBar {
    constructor(element,initialValue = 0) { 
      console.log('constructor called');
        this.valueElem = element.querySelector('.HP-value');
        this.fillElem = element.querySelector('.HP-bar-fill');
        
        this.setValue(initialValue);

        //console.log(this.valueElem);
       
    }

    setValue(newValue) {
        if (newValue < 0) {
            newValue = 0;
        }

        if (newValue > 100) {
            newValue = 100;
        }

        this.value = newValue;
        this.update();
    }

    update() {
        const percentage = this.value + '%'; // 50%
        this.fillElem.style.width = percentage;  //Error displays for me here but not the instructor.
        this.valueElem.textContent = percentage;
        
        
    }
}


const pb1 = new ProgressBar(document.querySelector('.HP'),80); 
//calls the value from user to display the new percentage. 
//In this case it should go from 50% to 80%.

这是小提琴： https://jsfiddle.net/0b7cs35x/

html javascript progress-bar typeerror

进度栏项目的“样式”未定义未捕获类型错误

问题描述

解决方法

相关问答