Question

我对这一切都很陌生，请原谅我，如果这是一个愚蠢的问题！当用户点击相关按钮时，我有一些JavaScript将厘米转换为英寸，厘米到米，米到英寸等。我想要隐藏不相关的按钮。即当用户选择输入单位为英寸时，“厘米”到“英寸”。是无关紧要的，应该隐藏起来。

我在Firefox中运行的代码很好，只有一半在chrome中运行。当用户从下拉列表中选择单元时，它应该适当地显示/隐藏按钮。但在Chrome中，它仅在您第一次选择单位时才有效，并且在选择其他单位时不会更新。

这是HTML：

            <select id="unit" onchange="TriangleArea()" class="unitOut">
                <option value="" id="unitCSS" onClick="CreateButtons()">Select Unit...</option>
                <option value="CM" onClick="CreateButtons()">Centimeters</option>
                <option value="M" onClick="CreateButtons()">Meters</option>
                <option value="Inch" onClick="CreateButtons()">Inches</option>
            </select>

以下是JavaScript：

function CreateButtons(){
        if (unit == "CM" )
        {
            document.getElementById("button1").setAttribute("type", "button"); // shows button1 (CM to Inch)
            document.getElementById("button2").setAttribute("type", "hidden"); // hides button2 (Inch to CM)
            document.getElementById("button3").setAttribute("type", "button"); // shows button3 (CM to M)
            document.getElementById("button4").setAttribute("type", "hidden"); // hides button4 (M to CM)
            document.getElementById("3cube").style.visibility="visible";
        }
        else if (unit =="Inch")
        {
            document.getElementById("button1").setAttribute("type", "hidden"); 
            document.getElementById("button2").setAttribute("type", "button"); 
            document.getElementById("button3").setAttribute("type", "hidden"); 
            document.getElementById("button4").setAttribute("type", "hidden");
            document.getElementById("3cube").style.visibility="visible";
        }
        else if (unit =="M")
        {
            document.getElementById("button1").setAttribute("type", "hidden"); 
            document.getElementById("button2").setAttribute("type", "hidden"); 
            document.getElementById("button3").setAttribute("type", "hidden"); 
            document.getElementById("button4").setAttribute("type", "button");
            document.getElementById("3cube").style.visibility="visible";
        }           
        else if (unit =="")
        {
            document.getElementById("button1").setAttribute("type", "button"); 
            document.getElementById("button2").setAttribute("type", "button"); 
            document.getElementById("button3").setAttribute("type", "button"); 
            document.getElementById("button4").setAttribute("type", "button");  
            document.getElementById("3cube").style.visibility="hidden";
        }
    }

unit变量在文档正文中声明为全局作用域。它设置为<select id="unit">的值，代码为unit = document.getElementById("unit").value，并且工作正常。那么为什么Firefox每次用户更改设备选项时都会隐藏/显示按钮，但Chrome只会在第一次显示正确的按钮而在更改设备时不会更新？

解决！ onchange="CreateButtons()"必须是<select>的属性，而不是<option>。感谢您的所有时间和帮助！

Answer 1

您必须显示和隐藏按钮，就像您正在制作＆＃34; 3cube＆＃34;可见即。

隐藏按钮：

document.getElementById('button1').style.visibility = 'hidden';

显示按钮：

document.getElementById('button1').style.visibility = 'visible';

Answer 2

使用样式 - ＆gt;隐藏和显示按钮的display属性。不要让它们隐藏起来。像，

document.getElementById("button1").style.display='none'; // hides button1
document.getElementById("button1").style.display='block'; // shows button1

display:none也会隐藏按钮占用的空间。

不要使用＆＃39; onclick＆＃39;对于每个选项，

            <select id="unit" onchange="CreateButtons()" class="unitOut">
                <option value="" id="unitCSS">Select Unit...</option>
                <option value="CM">Centimeters</option>
                <option value="M">Meters</option>
                <option value="Inch">Inches</option>
            </select>

指定＆＃39;单位＆＃39;像这样的变量，

function CreateButtons(){
        var unit = document.getElementById('unit').value;
        // do your rest of the code ...
        if (unit == "CM" )
        {
           // your code ...
        }
}

希望它有效，如果您需要更多帮助，请告诉我。感谢。

Answer 3

而不是使用＆＃39; Style.Visibility＆＃39;属性，我建议你使用＆＃39;的style.display＆＃39;属于隐藏/显示@balaG之前提到的按钮。

这是因为，按钮设置为，

Style.Visibility=false;

您将无法使用

在DOM中再次找到它

document.getElementByID('some_id');

希望这会有所帮助!!

Answer 4

<option onclick=>无法在Chrome上运行。你应该听取'改变'＃39; <select>元素的事件。

<input type =“hidden”/>在Firefox中运行良好，但在Chrome中运行不正常

4 个答案: