为什么我的文字不会更新? (HTML + JS)

时间:2016-07-20 02:16:28

标签: javascript html automation

我正在尝试在我的网站上更新文字。 JS中的变量确实如此,但屏幕上的文字并没有。 (是的,我知道代码是草率的,我让它工作,然后通过并使其漂亮。)

    <script>
    var moneyTotal = 370; //Variable for money, filled with starter money
    var moneyText = String(moneyTotal); //Variable for text
    var OD2Clicked = 0;
</script>
    <script>document.write("<h1 class='money'>Total: $"+ moneyText + "</h1>"); //Line for updating site </script>

<script>
    function Check(){ //Function that checks for radio button change
        if (document.getElementById('OD2').checked & OD2Clicked==0) {
            OD2Clicked = 1;
            Adding(20);
            console.log("Adding");
        }else if(document.getElementById('OD').checked & OD2Clicked>0){
            OD2Clicked = 0;
            Adding(-20);
            console.log("Subtracting");
        }

        setTimeout(function() {Check()}, 5000);
    }


    function Adding(m1){ //Function for adding
        moneyTotal += m1;
        moneyText = String(moneyTotal);
        console.log(moneyTotal);
        console.log(moneyText+" Text");
    }
</script>

1 个答案:

答案 0 :(得分:0)

就像我在评论中提到的那样:

  

当浏览器解析所有标签时,您的屏幕写入只会发生一次。每次修改值时,都需要在屏幕上更新文本。

这对你有用吗?

<script>
    var moneyTotal = 370; //Variable for money, filled with starter money
    var OD2Clicked = false;

    var timeoutPeriod = 5000;
</script>
    <script>document.write("<h1 class='money'>Total: $0</h1>"); //Line for updating site </script>

<script>
    function Check(){ //Function that checks for radio button change
        if (document.getElementById('OD2').checked) {
            if (!OD2Clicked) {
                OD2Clicked = true;
                moneyTotal += 20;
                console.log('Adding');
            } else if (OD2Clicked) {
                OD2Clicked = false;
                moneyTotal -= 20;
                console.log('Subtracting');
            }

            // Find DOM element we need to update
            document
                .querySelectorAll('.money')[0]
                .textContent = 'Total: $' + moneyTotal;
        }

        setTimeout(Check, timeoutPeriod);
    }
</script>