javascript 如何在输入值更改时取消隐藏CSS元素

iyr7buue  于 2022-10-30  发布在  Java
关注(0)|答案(3)|浏览(170)

在我正在处理的一个网页上,我得到了一个输入区域,当输入值设置为大于1时,我希望在该区域中显示隐藏的CSS元素(DIV)。

<input type="text" class="NetscapeFix CalTicketQuantity form-control" name="tix_quantity" id="tix_quantity_1842" value="0" size="4" maxlength="4" onchange="calculate(this.form);">

上面是输入字段的代码片段,也请参见所附的图像,以查看页面上的输入外观。Webpage Screenshot
因此,如果您看到上面的图像,我尝试实现的是在“Number of Individual Ticket Ticket:”输入更改为大于1时显示一个带有CSS的div HIDDEN。

3yhwsihp

3yhwsihp1#

在Calculate方法中,您可以添加代码来显示您元素,
如果元素div被CSS隐藏,则display = none

document.getElementById("elementId").display = "block";

如果元素div被CSS visibility = hidden隐藏

document.getElementById("elementId").visibility = "visible";
oyxsuwqo

oyxsuwqo2#

尝试如下

//  hide / show - div
<div id="hidediv">hide this div</div>
....

<input type="text" class="NetscapeFix CalTicketQuantity form-control" name="tix_quantity" id="tix_quantity_1842" value="0" size="4" maxlength="4" onchange="calculate(this.form);">
.....

// script fun
calculate() {
    ...
    ....
    if(this.form['tix_quantity'].value>1) {
        document.getElementById("hidediv").display = "none";
    }else {
        document.getElementById("hidediv").display = "block";
    }
    ...
}
gywdnpxw

gywdnpxw3#

所以你有一个输入字段供用户输入一个数字,如果用户在框中输入一个大于1的数字,那么取消隐藏div。这实际上很简单。你已经有了一个链接到函数的onchange事件。你所需要做的就是在该部分中放置一个简单的if语句,并使用其他人给你的代码行。
如果您在CSS显示中输入:无;然后

if (ticket>1){
document.getElementById("tix_quantity_1842").display = "block";
}

如果在CSS中,它是可见的:隐藏;然后

if (ticket>1){
document.getElementById("tix_quantity_1842").visibility = "visible";
}

相关问题