<input type="hidden"> 在 Firefox 中工作正常，但在 Chrome 中不行

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

使用样式 -> display 属性来隐藏和显示按钮。不要让它们隐藏起来。喜欢，

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

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

并且不要对每个选项都使用“onclick”，

            <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>

像这样分配“单位”变量，

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

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

Answer 2

您必须像使“3cube”可见一样显示和隐藏按钮，即

隐藏按钮：

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

显示按钮：

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

Answer 3

建议您不要使用“Style.Visibility”属性，而是使用 'Style.display' 属性用于隐藏/显示按钮，正如 @balaG 之前提到的。

这是因为，按钮一旦设置为，

Style.Visibility=false;  

你将无法通过使用在 DOM 中再次找到它，

document.getElementByID('some_id');

希望这会有所帮助！

Answer 4

<option onclick=> 不适用于 Chrome。您应该收听<select> 元素的“更改”事件。