Fatal编程技术网
  • javascript/
  • Javascript 如果页面上的文本消失，如何向图像中添加一个消失的命令？

Javascript 如果页面上的文本消失，如何向图像中添加一个消失的命令？

javascript html

Javascript 如果页面上的文本消失，如何向图像中添加一个消失的命令？,javascript,html,Javascript,Html,我正在制作一个HTML页面来显示以数字表示的信息，我将数字与另一个图像一起输出到页面中，我希望在数字输出下显示该图像 文本在等于null/0时自动消失，我希望图像在数字消失时消失，我已经在JS脚本的帮助下更新了代码，但是它没有解决我的问题，因为代码中的数字发生了变化，JS脚本只工作一次。数据通过异步函数输出到页面中，如果这有任何帮助的话 一段代码（JS&HTML）： 0 0x100 0x50 0xMiss 让batteryIMG=document.querySelector（“.battery

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

文本在等于null/0时自动消失，我希望图像在数字消失时消失，我已经在JS脚本的帮助下更新了代码，但是它没有解决我的问题，因为代码中的数字发生了变化，JS脚本只工作一次。数据通过异步函数输出到页面中，如果这有任何帮助的话

一段代码（JS&HTML）：



0
0x100 0x50 0xMiss
让batteryIMG=document.querySelector（“.battery img”）
让输出=document.querySelector（'.battery output'）；
让batteryNum=document.querySelector（“.batteryNum”）
如果（output.innerHTML=='0'| | output.innerHTML===''&&
batteryNum.innerHTML==''| | batteryNum.innerHTML==''）{
batteryIMG.style.display='none'；
output.style.display='none'；
batteryNum.style.display='none'；
}
更新1：我使用这段代码使图像和文本消失，但我不知道如何使它们重新出现并使脚本保持循环

更新2：所以我从一个朋友那里得到了帮助，他发现javascript中已经构建了一个循环，他只为图像和数字创建了两个变量，然后内置脚本，当文本=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'; 

        }


} 





0x100 0x50 0xMiss
/*目前不工作*/
让batteryIMG=document.querySelector（'.battery img'）//电池
让batteryNum=document.querySelector（'.battery num'）//电池中的数字
if（batteryNum.innerHTML==''| | batteryNum.innerHTML==''）{
batteryIMG.style.display='none'
batteryNum.style.display='none'；
}
否则{
（batteryNum.innerHTML==''| | batteryNum.innerHTML==''）{
batteryIMG.style.display='none'
batteryNum.style.display='none'；
}
}
这是运行html页面时显示的内容

这是当输出等于0/null时显示的内容（我希望图像在数字等于0/null时随数字一起消失）

我建议使用Javascript来操作DOM。对于本例，用Javascript实现相对简单

let batteryIMG = document.querySelector('.battery-img') // battery
let output = document.querySelector('.battery-output');// bottom most number
let batteryNum = document.querySelector('.battery-num') // number in battery

if(output.innerHTML === '' || output.innerHTML === '0' && batteryNum.innerHTML === '' || batteryNum.innerHTML === '0') {
  batteryIMG.style.display = 'none'
  output.style.display = 'none';
  batteryNum.style.display = 'none';

}
这是我做的一个代码笔的链接，显示了这一点。只需将数字更改为0或空白即可看到它的工作情况。
我建议使用Javascript来操作DOM。对于本例，用Javascript实现相对简单

let batteryIMG = document.querySelector('.battery-img') // battery
let output = document.querySelector('.battery-output');// bottom most number
let batteryNum = document.querySelector('.battery-num') // number in battery

if(output.innerHTML === '' || output.innerHTML === '0' && batteryNum.innerHTML === '' || batteryNum.innerHTML === '0') {
  batteryIMG.style.display = 'none'
  output.style.display = 'none';
  batteryNum.style.display = 'none';

}
这是我做的一个代码笔的链接，显示了这一点。只需将数字更改为0或空白即可看到它的工作情况。

首先在图像中添加一个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';
        }
首先在图像中添加一个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';
        }
共享当前代码的更好方法。根据你的文本，我认为你想把图像框分组，只需使用图像框的相对位置，对于数字，使用绝对css。这是在画布上绘制的，使用img标记还是作为背景和一些标记？你能分享你的代码吗？如果没有代码，我们只能猜测。我希望您检查的页面是rtpp.html，它显示信息。这是整个HTML文件，但是rtpp.HTML显示该信息，顺便说一下，更改的数据（数字）是每秒左右更改的实时数据。如果可能的话，您应该在问题中直接包含相关的代码片段。编辑您的问题副本粘贴相关代码，并使用{}按钮进行适当的语法高亮显示和缩进，您还可以准备Codepen或JSFIDLE演示。这是您如何询问StackOverflow检查的问题。共享当前代码的更好方法。根据你的文本，我认为你想把图像框分组，只需使用图像框的相对位置，对于数字，使用绝对css。这是在画布上绘制的，使用img标记还是作为背景和一些标记？你能分享你的代码吗？如果没有代码，我们只能猜测。我希望您检查的页面是rtpp.html，它显示信息。这是整个HTML文件，但是rtpp.HTML显示该信息，顺便说一下，更改的数据（数字）是每秒左右更改的实时数据。如果可能的话，您应该在问题中直接包含相关的代码片段。编辑您的问题副本粘贴相关代码，并使用{}按钮进行适当的语法高亮显示和缩进，您还可以准备Codepen或JSFIDLE演示。这是关于StackOverflow检查的问题。我如何将图像链接到JS脚本？因此我尝试将JS实现到html中，并将img的类设置为img电池，但它不起作用，我在没有类的情况下也这样做了。。。你能留下一些联系方式吗？这样我可以把代码发给你，你可以检查一下你是否有时间。你的描述有点难以理解，所以这可能就是它不起作用的原因。你可以发电子邮件给我RachaelConcessio@gmail.com我可以看一看，这很简单，我想做什么对不起，让它听起来很难，我只想图像消失时，数字消失。当它们等于0.00pp/时，数字消失，没有输出信息。我给你发了一封电子邮件。你能检查一下这个吗，我已经检查过了，但由于某种原因它不起作用。我已经给你发了一封带有h的电子邮件