在html中单击一个按钮时隐藏两个按钮的javascript代码

Question

我做了很多研究，似乎无法找到答案。 我希望你能帮助我。 我有显示两个按钮的代码，当您单击“确认”按钮时，它将显示弹出窗口并使两个按钮都隐藏。 我似乎无法使按钮消失，弹出窗口工作正常。

function confirm() {
alert("Thank you for Confirming the Shipping Address. ");
var confirm_button = document.getElementsByName("confirm");
confirm_button.style.visibility="hidden";
var change_button = document.getElementsByName("change")
change_button.style.visibility="hidden";

HTML：

<input type="submit" name="confirm" value="Confirm Shipping Address" style="width: 180px; height: 35px"  onclick="confirm()" >

Answer 1

使用getElementsBy ...时，即使只有一个元素，它也会返回一个元素列表。 （getElementsBy中的复数个元素将其舍弃）。

因此，您需要告诉它在列表中找到特定的对象。 如果只有一个可以使用

document.getElementsByClassName('blah')[0]

或者，您可以给您的元素一个ID并以这种方式获取

<input type='button' id='blah'/>
document.getElementById('blah').style.visibility='hidden';

Answer 2

就个人而言，我不喜欢嵌入式JavaScript。 这是没有它的情况下如何做的示例：

 //function confirm() { //alert("Thank you for Confirming the Shipping Address. "); //var confirm_button = document.getElementsByName("confirm"); //confirm_button.style.visibility="hidden"; //var change_button = document.getElementsByName("change") //change_button.style.visibility="hidden"; //} $("#confirm").off().on("click", function(){ // <-- so it doesnt bind on each click var changeElem = $("#change"); $(this).hide(); changeElem.hide(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <input type="submit" id="confirm" name="confirm" value="Confirm Shipping Address" style="width: 180px; height: 35px" > <input type="submit" id="change" value="Change Shipping Address" style="width: 180px; height: 35px" > 

希望这可以帮助 ：）