时间戳

首页 > 解决方案 > 如果我的页面上的文本消失，如何向我的图像添加命令？

javascript - 如果我的页面上的文本消失，如何向我的图像添加命令？

问题描述

我正在制作一个 HTML 页面来显示数字信息，我将数字与另一个图像一起输出到页面中，我想在数字输出下显示该图像。

文本在等于 null/0 时自动消失，我希望图像在数字消失时消失，我已经在 J​​S 脚本编写器的帮助下更新了代码，但是它没有解决我的问题，因为代码中的数字发生了变化并且JS 脚本只能运行一次。如果有任何帮助，数据将通过异步功能输出到页面中。

一段代码（JS&HTML）：

<body>
    <img class="batset battery-img" src="img/bat.png"> <!-- this is the image I want to disappear when the numbers = 0.00 or have no output  -->
    <p id="pp-lable" class="text glow battery-output">0</p> <!--these numbers already disappear when they = 0.00 or have no output (these numbers change as it links to another JS which links to a pogram, so a JS that is shown in this snippet wont work as it does not repeat it self to detect the numbers that change-->
    <pre id="hit-count-lable" class="text-hit-count">0x100 0x50 0xMiss</pre> <!--this does not need to be modified or made to disappear it is fine as long as the numbers above do it-->

<script>
        let batteryIMG = document.querySelector('.battery-img')
        let output = document.querySelector('.battery-output');
        let batteryNum = document.querySelector('.battery-num')
        if(output.innerHTML === '0' || output.innerHTML === '' && 
        batteryNum.innerHTML === '' || batteryNum.innerHTML === '') {
        batteryIMG.style.display = 'none';
        output.style.display = 'none';
        batteryNum.style.display = 'none';
        }
</script>

更新 1：我使用此代码使图像和文本消失，但我不知道如何使它们重新出现并使脚本保持循环。

更新2：所以我得到了一位朋友的帮助，他发现了一个已经内置在javascript中的循环，他只是为图像和数字制作了2个变量，然后构建了允许图像在文本=时消失的脚本到 0。感谢大家在线程中的贡献，我现在将关闭这个线程作为回答并给出最好的答案给神秘的影子，因为我们在 js 中实现的代码是由她建议的。


<body>
    <img class="batset battery-img" src="img/bat.png"/> 
    <p id="pp-lable" class="text glow battery-num"></p> 
    <pre id="hit-count-lable" class="text-hit-count">0x100 0x50 0xMiss</pre> 

<script>
    /*currently not working*/
    let batteryIMG = document.querySelector('.battery-img') // battery
    let batteryNum = document.querySelector('.battery-num') // number in battery
    if(batteryNum.innerHTML === '' || batteryNum.innerHTML === '') {
    batteryIMG.style.display= 'none'
    batteryNum.style.display = 'none';
    }

    else {
    (batteryNum.innerHTML === '' || batteryNum.innerHTML === ''); {
    batteryIMG.style.display = 'none'
    batteryNum.style.display = 'none'; 

        }


}

在此处输入图像描述 这是运行 html 页面时显示的内容

在此处输入图像描述 这是输出等于 0/null 时显示的内容（我希望图像在等于 0/null 时与数字一起消失）

标签： javascripthtml

解决方案

首先为您的图像添加一个ID

然后在括号后添加 document.getElementById('MyImg').classList.add('hidden') 如下

        let batteryIMG = document.querySelector('.battery-img')
        let output = document.querySelector('.battery-output');
        let batteryNum = document.querySelector('.battery-num')
        if(output.innerHTML === '0' || output.innerHTML === '' && 
        batteryNum.innerHTML === '' || batteryNum.innerHTML === '') {
        document.getElementById('MyImg').classList.add('hidden')  // Add this line
        batteryIMG.style.display = 'none';
        output.style.display = 'none';
        batteryNum.style.display = 'none';
        }

推荐阅读