在点击javascript时制作HTML按钮消失 [英] Making an HTML button disappear when clicked through javascript

查看：92
本文介绍了在点击javascript时制作HTML按钮消失的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在制作电子游戏，并且我想要一个按钮消失，一旦我点击它并移动到下一个屏幕。我可以通过我的html和js文件设置按钮的功能，但我不知道如何使它一旦点击就消失。

我的HTML代码：

 < html> 
< head> 
< title> Pong< / title> 
< link type =text / csshref =main.css =stylesheet> 
< / head> 
< canvas id =gameCanvaswidth =1350height =600>< / canvas> 
< body> 
< button id ='easy_click'onclick =EasyChange（）>简单< /按钮> 
< button id ='int_change'onclick =intChange（）>中级< /按钮> 
< button id =hard_changeonclick =hardChange（）>硬< /按钮> 
< / body> 
< script src =functions.js>< / script> 
 
< / html>

这是我的JS代码： 

  var canvas; 
 var canvasContext; 
 var ballX = 50; 
 var ballY = 50; 
 var ballSpeedX = 20; 
 var ballSpeedY = 10 
 var menuScreen = false; 
 var name =由Jonah Johnson开发; 
 var player1Score = 0; 
 var player2Score = 0; 
 const WINNING_SCORE = 10; 
 var easybutton =简单; 
 var hardButton =硬; 
 var intButton =Intermediate; 
 var diffLevelEasy = false; 
 var diffLevelMedium = true; 
 var diffLevelHard = false; 
 var showingWinScreen = true; 
 
 var paddle1Y = 250; 
 var paddle2Y = 250; 
 const PADDLE_THICKNESS = 10; 
 const PADDLE_HEIGHT = 100; 
 
函数calculateMousePos（evt）{
 var rect = canvas.getBoundingClientRect（）; 
 var root = document.documentElement; 
 var mouseX = evt.clientX  -  rect.left  -  root.scrollLeft; 
 var mouseY = evt.clientY  -  rect.top  -  root.scrollTop; 
 return {
 x：mouseX，
 y：mouseY 
}; 
 
 
 //改变难度
 //容易改变
函数EasyChange（）{
 diffLevelEasy = true; 
 diffLevelMedium = false; 
 diffLevelHard = false; 
 showingWinScreen = false; 
} 
 
函数intChange（）{
 diffLevelEasy = false; 
 diffLevelMedium = true; 
 diffLevelHard = false; 
 showingWinScreen = false; 
 
} 
 
函数hardChange（）{
 diffLevelEasy = false; 
 diffLevelMedium = false; 
 diffLevelHard = true; 
 showingWinScreen = false; 
} 
 
函数handleMouseClick（evt）{
 if（showingWinScreen）{
 player1Score = 0; 
 player2Score = 0; 
 showingWinScreen = false; 
} 
 
 //获得一个简单的媒介
函数handleMouseClick（evt）{
 if（easybutton）{
 diffLevelEasy = true; 
 diffLevelMedium = false; 
 diffLevelHard = false; 
 showingWinScreen = false; 
 
 $ b $ //获得中等
函数handleMouseClick（evt）{
 if（intButton）{
 diffLevelEasy = false; 
 diffLevelMedium = true; 
 diffLevelHard = false; 
 showingWinScreen = false; 
 
 
 $ b //变得很难
函数handleMouseClick（evt）{
 if（hardButton）{
 diffLevelEasy = false; 
 diffLevelMedium = false; 
 diffLevelHard = true; 
 showingWinScreen = false; 
 
 
 
 $ b window.onload = function（）{
 canvas = document.getElementById（'gameCanvas'）; 
 canvasContext = canvas.getContext（'2d'）; 
 
 var framesPerSecond = 30; 
 setInterval（function（）{
 moveEverything（）; 
 drawEverything（）; 
}，1000 / framesPerSecond）; 
 
 canvas.addEventListener（'mousedown'，handleMouseClick）; 
 
 canvas.addEventListener（'mousemove'，
 function（evt）{
 var mousePos = calculateMousePos（evt）; 
 paddle1Y = mousePos.y  - （PADDLE_HEIGHT / 2）; 
}）; 
} 
 
函数ballReset（）{
 if（player1Score> = WINNING_SCORE || 
 player2Score> = WINNING_SCORE）{
 
显示WinScreen = true; 
 
} 
 
 ballSpeedX = -ballSpeedX; 
 ballX = canvas.width / 2; 
 ballY = canvas.height / 2; 
 
 
函数computerMovement（）{
 /// ai movement 
 // easy 
 if（diffLevelEasy === true）{
 var paddle2YCenter = paddle2Y +（PADDLE_HEIGHT / 2）; 
 if（paddle2YCenter  paddle2Y = paddle2Y + 2; 
} else if（paddle2YCenter> ballY + 35）{
 paddle2Y = paddle2Y  -  2; 
} 
} 
 // medium 
 else if（diffLevelMedium === true）{
 var paddle2YCenter = paddle2Y +（PADDLE_HEIGHT / 2）; 
 if（paddle2YCenter  paddle2Y = paddle2Y + 12; 
} else if（paddle2YCenter> ballY + 35）{
 paddle2Y = paddle2Y  -  12; 
} 
} 
 // hard 
 else if（diffLevelHard === true）{
 var paddle2YCenter = paddle2Y +（PADDLE_HEIGHT / 2）; 
 if（paddle2YCenter  paddle2Y = paddle2Y + 18; 
} else if（paddle2YCenter> ballY + 35）{
 paddle2Y = paddle2Y  -  18; 
 
 
 
 
 $ b函数moveEverything（）{
 if（showingWinScreen）{//显示赢屏
返回; 
} 
 
 computerMovement（）; 
 
 ballX = ballX + ballSpeedX; 
 ballY = ballY + ballSpeedY; 
 
 if（ballX <0）{
 if（ballY> paddle1Y&& 
 ballY< paddle1Y + PADDLE_HEIGHT）{
 ballSpeedX = -ballSpeedX ; 
 
 var deltaY = ballY 
  - （paddle1Y + PADDLE_HEIGHT / 2）; 
 ballSpeedY = deltaY * 0.35; 
} else {
 player2Score ++; //必须是BEFORE ballReset（）
 ballReset（）; 
} 
} 
 if（ballX> canvas.width）{
 if（ballY> paddle2Y&& 
 ballY< paddle2Y + PADDLE_HEIGHT）{ 
 ballSpeedX = -ballSpeedX; 
 
 var deltaY = ballY 
  - （paddle2Y + PADDLE_HEIGHT / 2）; 
 ballSpeedY = deltaY * 0.35; 
} else {
 player1Score ++; //必须是BEFORE ballReset（）
 ballReset（）; 
} 
} 
 if（ballY <0）{
 ballSpeedY = -ballSpeedY; 
} 
 if（ballY> canvas.height）{
 ballSpeedY = -ballSpeedY; 
 
 
 
 function drawNet（）{
 for（var i = 0; i< canvas.height; i + = 40）{
 colorRect （canvas.width / 2-1，I，2,20， '白'）; 
 
 
 
函数drawEverything（）{
 //下一行用黑色
空白屏幕colorRect（0,0，canvas.width ，canvas.height， '黑色'）; 
 
 
 if（showingWinScreen）{
 canvasContext.fillStyle ='white'; 
 
 if（player1Score> = WINNING_SCORE）{
 canvasContext.fillText（Left Player Won，350，200）; 
} else if（player2Score> = WINNING_SCORE）{
 canvasContext.fillText（Right Player Won，350，200）; 
} 
 
 canvasContext.fillText（click to continue，350，500）; 
 canvasContext.fillText（难度：，50，50）; 
 canvasContext.fillText（easybutton，50，100）; 
 canvasContext.fillText（intButton，50，200）; 
 canvasContext.fillText（hardButton，50，300）; 
 return; 
} 
 
 drawNet（）; 
 
 //这是左边玩家桨
 colorRect（0，paddle1Y，PADDLE_THICKNESS，PADDLE_HEIGHT，'white'）; 
 
 //这是正确的计算机桨
 colorRect（canvas.width-PADDLE_THICKNESS，paddle2Y，PADDLE_THICKNESS，PADDLE_HEIGHT，'white'）; 
 
 //下一行绘制球
 colorCircle（ballX，ballY，10，'white'）; 
 
 canvasContext.fillText（player1Score，100，100）; 
 canvasContext.fillText（player2Score，canvas.width-100，100）; 
 canvasContext.fillText（name，100，590）; 
} 
 
函数colorCircle（centerX，centerY，radius，drawColor）{
 canvasContext.fillStyle = drawColor; 
 canvasContext.beginPath（）; 
 canvasContext.arc（centerX，centerY，radius，0，Math.PI * 2，true）; 
 canvasContext.fill（）; 
 
 
函数colorRect（leftX，topY，width，height，drawColor）{
 canvasContext.fillStyle = drawColor; 
 canvasContext.fillRect（leftX，topY，width，height）; 
} 
 //设置游戏的难度是多少
 if（diffLevel = diffLevelEasy）{
 var paddle2YCenter = paddle2Y +（PADDLE_HEIGHT / 2）; 
 if（paddle2YCenter  paddle2Y = paddle2Y + 2; 
} else if（paddle2YCenter> ballY + 35）{
 paddle2Y = paddle2Y  -  2;

我只是想点击时删除按钮，那么我该怎么做呢？

解决方案

在网上找到这个试试看



< code>< input type =buttonid =togglervalue =ToggleronClick =action（）; />< input type =buttonid =toggleevalue =Togglee/>< script> var hidden = false;函数action（）{hidden =！hidden; if（hidden）{document.getElementById（'togglee'）。style.visibility ='hidden'; } else {document.getElementById（'togglee'）。style.visibility ='visible';

I am working on a creating a video game, and I want a button to disappear once I click it and move onto the next screen. I can set the function of the button through my html and js file, but I am not sure how to make it disappear once clicked.

My HTML code:

<html>
<head>
<title> Pong </title>
<link type = "text/css" href = "main.css" rel = "stylesheet">
</head>
<canvas id="gameCanvas" width="1350" height="600"></canvas>
<body>
<button id = 'easy_click' onclick="EasyChange()"> Easy </button>
<button id = 'int_change' onclick="intChange()"> Intermediate </button>
<button id = "hard_change" onclick="hardChange()"> Hard </button>
</body>
<script src = "functions.js"></script>

</html>

Here is my JS code:

    var canvas;
var canvasContext;
var ballX = 50;
var ballY = 50;
var ballSpeedX = 20;
var ballSpeedY = 10
var menuScreen = false;
var name = "Developed by Jonah Johnson";
var player1Score = 0;
var player2Score = 0;
const WINNING_SCORE = 10;
var easybutton = "Easy";
var hardButton = "Hard";
var intButton = "Intermediate";
var diffLevelEasy = false;
var diffLevelMedium = true;
var diffLevelHard = false;
var showingWinScreen = true;

var paddle1Y = 250;
var paddle2Y = 250;
const PADDLE_THICKNESS = 10;
const PADDLE_HEIGHT = 100;

function calculateMousePos(evt) {
    var rect = canvas.getBoundingClientRect();
    var root = document.documentElement;
    var mouseX = evt.clientX - rect.left - root.scrollLeft;
    var mouseY = evt.clientY - rect.top - root.scrollTop;
    return {
        x:mouseX,
        y:mouseY
    };
}

//changing of difficulty
//easy changing
function EasyChange() {
    diffLevelEasy = true;
    diffLevelMedium = false;
    diffLevelHard = false;
    showingWinScreen = false;
}

function intChange() {
    diffLevelEasy = false;
    diffLevelMedium = true;
    diffLevelHard = false;
    showingWinScreen = false;

}

function hardChange() {
    diffLevelEasy = false;
    diffLevelMedium = false;
    diffLevelHard = true;
    showingWinScreen = false;
}

function handleMouseClick(evt) {
    if(showingWinScreen) {
        player1Score = 0;
        player2Score = 0;
        showingWinScreen = false;
    }
}
// getting an easy medium
function handleMouseClick(evt) {
   if(easybutton) {
       diffLevelEasy = true;
       diffLevelMedium = false;
       diffLevelHard = false;
       showingWinScreen = false;
   }
}
//getting medium
function handleMouseClick(evt) {
    if(intButton) {
        diffLevelEasy = false;
       diffLevelMedium = true;
       diffLevelHard = false;
       showingWinScreen = false;

    }
}
//getting hard
function handleMouseClick(evt) {
    if(hardButton) {
        diffLevelEasy = false;
        diffLevelMedium = false;
        diffLevelHard = true;
        showingWinScreen = false;
    }
}


window.onload = function() {
    canvas = document.getElementById('gameCanvas');
    canvasContext = canvas.getContext('2d');

    var framesPerSecond = 30;
    setInterval(function() {
            moveEverything();
            drawEverything();   
        }, 1000/framesPerSecond);

    canvas.addEventListener('mousedown', handleMouseClick);

    canvas.addEventListener('mousemove',
        function(evt) {
            var mousePos = calculateMousePos(evt);
            paddle1Y = mousePos.y - (PADDLE_HEIGHT/2);
        });
}

function ballReset() {
    if(player1Score >= WINNING_SCORE ||
        player2Score >= WINNING_SCORE) {

        showingWinScreen = true;

    }

    ballSpeedX = -ballSpeedX;
    ballX = canvas.width/2;
    ballY = canvas.height/2;
}

function computerMovement() {   
    /// ai movement
    //easy
    if(diffLevelEasy === true) {
    var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2);
    if(paddle2YCenter < ballY - 35) {
        paddle2Y = paddle2Y + 2;
    } else if(paddle2YCenter > ballY + 35) {
        paddle2Y = paddle2Y - 2;
    }
}
    //medium
    else if(diffLevelMedium === true) {
    var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2);
    if(paddle2YCenter < ballY - 35) {
        paddle2Y = paddle2Y + 12;
    } else if(paddle2YCenter > ballY + 35) {
        paddle2Y = paddle2Y - 12;
    }
}
    //hard
    else if(diffLevelHard === true) {
    var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2);
    if(paddle2YCenter < ballY - 35) {
        paddle2Y = paddle2Y + 18;
    } else if(paddle2YCenter > ballY + 35) {
        paddle2Y = paddle2Y - 18;
    }
    }
}


function moveEverything() {
    if(showingWinScreen) {                         //showing win screen
        return;
    }

    computerMovement();

    ballX = ballX + ballSpeedX;
    ballY = ballY + ballSpeedY;

    if(ballX < 0) {
        if(ballY > paddle1Y &&
            ballY < paddle1Y+PADDLE_HEIGHT) {
            ballSpeedX = -ballSpeedX;

            var deltaY = ballY
                    -(paddle1Y+PADDLE_HEIGHT/2);
            ballSpeedY = deltaY * 0.35;
        } else {
            player2Score++; // must be BEFORE ballReset()
            ballReset();
        }
    }
    if(ballX > canvas.width) {
        if(ballY > paddle2Y &&
            ballY < paddle2Y+PADDLE_HEIGHT) {
            ballSpeedX = -ballSpeedX;

            var deltaY = ballY
                    -(paddle2Y+PADDLE_HEIGHT/2);
            ballSpeedY = deltaY * 0.35;
        } else {
            player1Score++; // must be BEFORE ballReset()
            ballReset();    
        }
    }
    if(ballY < 0) {
        ballSpeedY = -ballSpeedY;
    }
    if(ballY > canvas.height) {
        ballSpeedY = -ballSpeedY;
    }
}

function drawNet() {
    for(var i=0;i<canvas.height;i+=40) {
        colorRect(canvas.width/2-1,i,2,20,'white');
    }
}

function drawEverything() {
    // next line blanks out the screen with black
    colorRect(0,0,canvas.width,canvas.height,'black');


    if(showingWinScreen) {
        canvasContext.fillStyle = 'white';

        if(player1Score >= WINNING_SCORE) {
            canvasContext.fillText("Left Player Won", 350, 200);
        } else if(player2Score >= WINNING_SCORE) {
            canvasContext.fillText("Right Player Won", 350, 200);
        }

        canvasContext.fillText("click to continue", 350, 500);
        canvasContext.fillText("Difficulty:", 50, 50);
        canvasContext.fillText(easybutton, 50, 100);
        canvasContext.fillText(intButton, 50, 200);
        canvasContext.fillText(hardButton, 50, 300);
        return;
    }

    drawNet();

    // this is left player paddle
    colorRect(0,paddle1Y,PADDLE_THICKNESS,PADDLE_HEIGHT,'white');

    // this is right computer paddle
    colorRect(canvas.width-PADDLE_THICKNESS,paddle2Y,PADDLE_THICKNESS,PADDLE_HEIGHT,'white');

    // next line draws the ball
    colorCircle(ballX, ballY, 10, 'white');

    canvasContext.fillText(player1Score, 100, 100);
    canvasContext.fillText(player2Score, canvas.width-100, 100);
    canvasContext.fillText(name, 100, 590);
}

function colorCircle(centerX, centerY, radius, drawColor) {
    canvasContext.fillStyle = drawColor;
    canvasContext.beginPath();
    canvasContext.arc(centerX, centerY, radius, 0,Math.PI*2,true);
    canvasContext.fill();
}

function colorRect(leftX,topY, width,height, drawColor) {
    canvasContext.fillStyle = drawColor;
    canvasContext.fillRect(leftX,topY, width,height);
}
//sets how hard the game is
if(diffLevel = diffLevelEasy) {
var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2);
    if(paddle2YCenter < ballY - 35) {
        paddle2Y = paddle2Y + 2;
    } else if(paddle2YCenter > ballY + 35) {
        paddle2Y = paddle2Y - 2;
    }
}

I am just trying to make the button delete when clicked, so how do I do that?

解决方案

Found this on web try it

<input type="button" id="toggler" value="Toggler" onClick="action();" />
<input type="button" id="togglee" value="Togglee" />

<script>
    var hidden = false;
    function action() {
        hidden = !hidden;
        if(hidden) {
            document.getElementById('togglee').style.visibility = 'hidden';
        } else {
            document.getElementById('togglee').style.visibility = 'visible';
        }
    }
</script>

这篇关于在点击javascript时制作HTML按钮消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆