单击一个按钮时,我需要让所有按钮消失

时间:2014-03-03 06:13:59

标签: javascript button show-hide

我正在编写各种游戏,为您提供多种选择。选择完选项后,所有按钮(包括您的选择)都将消失,然后您将继续下一轮。我有一个允许这样做的脚本,但是对于每一轮按钮,我必须重写它以遵守新的按钮组。为了避免每次都重复自己,我试图获得一个完成这个的通用脚本

HTML

<input type="button" class="btn" id="getUp" name="answer" value="get up"  onclick="this.style.display='none'; hideSleepIn(); " />
<input type="button" class="btn" id="sleepIn" name="answer" value="sleep in" onclick="this.style.display='none'; hideGetUp();" />

的JavaScript

var hidden = false;
var click = onClick;

function hideSleepIn()
{
    hidden = !hidden;

    if(getUp === click)
    {
        document.getElementById('getUp').style.visibility = 'visible';
    }

    else
    {
        document.getElementById('sleepIn').style.visibility = 'hidden';
    }       
}

3 个答案:

答案 0 :(得分:0)

尝试替换

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

用这个

document.getElementById("getUp").style.display = 'none';

答案 1 :(得分:0)

我使用当前用于隐藏div的脚本,也隐藏/显示页面上的按钮

  function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
  item.className=(item.className=='hidden')?'unhidden':'hidden';

}   }

<input type="button" class="unhidden" id="firstPath" value="get up" onclick="unhide('getUpText'); unhide('firstPath2'); unhide('firstPath');" />
文本

 
 <input type="button" class="unhidden" id="firstPath2" value="sleep in" onclick="unhide('sleepInText'); unhide('firstPath'); unhide('firstPath2');" />
文本

答案 2 :(得分:-1)


当您单击“是”按钮时,该按钮将消失-您确定要同时删除所有按钮以及角度7中的两个按钮。

当在角度7中单击一个按钮时,使所有按钮消失##

 component.ts File -
 ---------------------------------------------------------------------------
 export class DisappearComponent implements OnInit {
 isDisappear= false;


 Disappear()
    {   
        this.isDisappear=true;
    } 

   component.html File -
   ----------------------------------------------------------------------------------
  <div class="row mx-0 mb-4" *ngIf="!isDisappear">
    <div class="col-12">
        <label>Are you sure want to disappear all the buttons</label>
        <div class="row">
            <div class="col-3">                    
                <button (click)="Disappear()" class="btn btn-secondary btn-custom 
                 mr-3">Yes</button> 
            </div>
            <div class="col-3">                  
                <button (click)="function()" class="btn btn-secondary btn-custom mr- 
            3">No</button>
           </div>                     
        </div>
     </div>
  </div>