首页 > 解决方案 > 如何使用 getAttribute 传递组件中定义的值而不是 aframe 标签属性?

问题描述

问题:

在 aframe 组件score中,我需要time从组件中获取当前值timer来计算分数。

但是,使用该getAttribute方法会返回一个NaN值或[object Object].

我尝试将time变量从传递timerscore,但是 的值score要么没有改变,要么也显示为NaN[object Object]。我对 js 和 aframe 还很陌生,如果我的代码很乱,我深表歉意。

注意:为简单起见,许多实体未包含在有问题的代码中。

JS 组件:

         AFRAME.registerComponent('timer', {
                schema:{
                    value:{default: 60},
                },

                init: function B() {
                    var data = this.data;
                    var el = this.el; 
                    var time = 60;
                    if(time == 60 || time == 0){
                        start_b.addEventListener('click', function() {
                            setInterval(() => {
                                if(time > 0){
                            time--
                            el.setAttribute('text', 'value', time);};
                            }, 1000);
                    })}
                }});

            AFRAME.registerComponent('score', {
                  schema: {
                    el: {type: 'selector'},
                    score:{type: 'int', default: 0},
                },

            init: function () {
                var newScore = 0;
                var sceneEl = document.querySelector('a-scene'); 
                var scoreBoard = document.querySelector('#score_t');
                sceneEl.querySelector('#mix_b').addEventListener('click', () => {
                    var colorOutput = document.querySelector('#box');
                    var colorFrame = document.querySelector('#colorBox');
                    var timeDisplayV = document.querySelector('#timeDisplay');
                    var timeDisplayn = timeDisplayV.getAttribute('text', 'value');
                    var colorAsked = colorFrame.getAttribute('color');
                    var colorMade = colorOutput.getAttribute('color');

                    if(colorMade == colorAsked){
                        var timeDisplayn = timeDisplayV.getAttribute('text', 'value');
                        this.data.score = timeDisplayn
                        newScore = 'Score: ' + this.data.score
                        scoreBoard.setAttribute('text','value', newScore);
                    }
                });

                clear_b.addEventListener('click', function () {
                    el.setAttribute("color", "#ffffff");
                    });
                }
            });

HTML 标签:

            <a-entity 
                id="score_t"
                text="value: Score: 0"
                position="0.7 0.45 -1" >
            </a-entity>

            <a-text 
                id="timeDisplay"
                timer="value:" 
                position="0.7 0.65 -1" 
                scale="0.3 0.3 0.3">
            </a-text>

标签: javascripthtmlcomponentsaframegetattribute

解决方案


推荐阅读