英文:
Same button style but different output
问题
我有一个带有3个按钮的div。相同的样式，但返回按钮不在中心对齐，而在左侧。有人知道问题在哪里吗？前两个按钮都正常工作，直到单击“与计算机对战”或“与玩家对战”时，它将显示3个新按钮，在这里“返回”按钮未居中对齐。
<div id="modeButtons" class="buttons">
<button class="style1" id="modeComputer" onclick="changeMode('computer')"> Vs Computer</button>
<button class="style1" id="modePlayer" onclick="changeMode('player')"> Vs Player</button>
</div>
<div id="turnButtons" class="buttons" style="display:none;">
<button class="style1" id="firstComputer" onclick="firstTurn('computer')"> Computer first</button>
<button class="style1" id="firstPlayer" onclick="firstTurn('player')"> Player first</button>
<button class="style1" id="backToMode" onclick="goBack()">Back</button>
</div>
请注意，这只是HTML代码的翻译，不包括CSS和JavaScript部分。
英文:
I have a div with 3 buttons in it. Same style but the back button is not aligned at the center but at the left side. Does anyone know what is the problem here? The first 2 buttons are working fine until you click either VsComputer or VsPlayer, It will show 3 new buttons, in here the "Back" button is not align at the center.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function firstTurn(turn) {
if (turn == 'computer') {
ComputerMove();
}
if (turn == 'player') {
PlayerMove();
}
document.getElementById("turnButtons").style.display = "none";
}
function goBack() {
document.getElementById("modeButtons").style.display = "block";
document.getElementById("turnButtons").style.display = "none";
}
function changeMode(mode) {
if (mode === 'computer') {
// do something
}
if (mode === 'player') {
// do something
}
document.getElementById("modeButtons").style.display = "none";
document.getElementById("turnButtons").style.display = "block";
document.getElementById("backToMode").style.display = "block";
}
<!-- language: lang-css -->
.buttons {
text-align: center;
}
.style1 {
background-color: #ff6b6b;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 20px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
text-align: center;
}
.style1:hover {
background-color: #ff4d4d;
}
<!-- language: lang-html -->
<div id="modeButtons" class="buttons">
<button class="style1" id="modeComputer" onclick="changeMode('computer')"> Vs Computer</button>
<button class="style1" id="modePlayer" onclick="changeMode('player')"> Vs Player</button>
</div>
<div id="turnButtons" class="buttons" style="display:none;">
<button class="style1" id="firstComputer" onclick="firstTurn('computer')"> Computer first</button>
<button class="style1" id="firstPlayer" onclick="firstTurn('player')"> Player first</button>
<button class="style1" id="backToMode" onclick="goBack()">Back</button>
</div>
<!-- end snippet -->
答案1
得分: 4
document.getElementById("backToMode").style.display = "block";
document.getElementById("backToMode").style.display = "inline-block";
document.getElementById("backToMode").style.display = "inline-block"; // this line need to be inline-block
英文:
In your Javascript you set the display property to block
document.getElementById("backToMode").style.display="block";
<br><br>
Simply change it to inline-block will fix the problem.
document.getElementById("backToMode").style.display="inline-block";
Full Example, only line changed is the one mentioned above:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function firstTurn(turn) {
if (turn == 'computer') {
ComputerMove();
}
if (turn == 'player') {
PlayerMove();
}
document.getElementById("turnButtons").style.display = "none";
}
function goBack() {
document.getElementById("modeButtons").style.display = "block";
document.getElementById("turnButtons").style.display = "none";
}
function changeMode(mode) {
if (mode === 'computer') {
// do something
}
if (mode === 'player') {
// do something
}
document.getElementById("modeButtons").style.display = "none";
document.getElementById("turnButtons").style.display = "block";
document.getElementById("backToMode").style.display = "inline-block"; // this line need to be inline-block
}
<!-- language: lang-css -->
.buttons {
text-align: center;
}
.style1 {
background-color: #ff6b6b;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 20px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
text-align: center;
}
.style1:hover {
background-color: #ff4d4d;
}
<!-- language: lang-html -->
<div id="modeButtons" class="buttons">
<button class="style1" id="modeComputer" onclick="changeMode('computer')"> Vs Computer</button>
<button class="style1" id="modePlayer" onclick="changeMode('player')"> Vs Player</button>
</div>
<div id="turnButtons" class="buttons" style="display:none;">
<button class="style1" id="firstComputer" onclick="firstTurn('computer')"> Computer first</button>
<button class="style1" id="firstPlayer" onclick="firstTurn('player')"> Player first</button>
<button class="style1" id="backToMode" onclick="goBack()">Back</button>
</div>
<!-- end snippet -->
答案2
得分: 0
METHOD 1:
我建议在这种情况下使用 flexbox
使用 CSS 的 flexbox 和它的属性
在 HTML 文件中，我稍微修改了结构，以便使用 flexbox。两个父 div 的 display 属性都应设置为 flex
对于第一个 div 的 CSS
display: flex; // 设置 display 属性为 flex
justify-content: center; // 将内容水平居中
由于第二个 div 的 flex 方向设置为 column
flex-direction: column;
align-items: center; // 将内容水平居中
要了解更多有关 flexbox 的用法，请参考：
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
我还为所有按钮添加了相同的宽度，以便在单击按钮时布局保持一致
button {
width: 150px;
}
下面是代码片段
<!-- 开始代码片段：不隐藏 js 控制台为真，不使用 Babel 编译 -->
<!-- 语言: lang-js -->
function firstTurn(turn) {
if (turn == 'computer') {
ComputerMove();
}
if (turn == 'player') {
PlayerMove();
}
document.getElementById("turnButtons").style.display = "none";
}
function goBack() {
document.getElementById("modeButtons").style.display = "flex"; // 将此更改为 "flex"
document.getElementById("turnButtons").style.display = "none";
}
function changeMode(mode) {
if (mode === 'computer') {
// 做一些事情
}
if (mode === 'player') {
// 做一些事情
}
document.getElementById("modeButtons").style.display = "none";
document.getElementById("turnButtons").style.display = "flex"; // 将此更改为 "flex"
document.getElementById("backToMode").style.display = "block";
}
<!-- 语言: lang-css -->
.buttons {
display: flex;
justify-content: center;
}
.buttons2 {
flex-direction: column;
align-items: center;
}
button {
width: 150px;
}
.style1 {
background-color: #ff6b6b;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 20px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
text-align: center;
}
.style1:hover {
background-color: #ff4d4d;
}
<!-- 语言: lang-html -->
<div id="modeButtons" class="buttons">
<button class="style1" id="modeComputer" onclick="changeMode('computer')"> Vs Computer</button>
<button class="style1" id="modePlayer" onclick="changeMode('player')"> Vs Player</button>
</div>
<div id="turnButtons" class='buttons2' style="display:none;">
<div class="buttons">
<button class="style1" id="firstComputer" onclick="firstTurn('computer')"> Computer first</button>
<button class="style1" id="firstPlayer" onclick="firstTurn('player')"> Player first</button>
</div>
<button class="style1" id="backToMode" onclick="goBack()">Back</button>
</div>
<!-- 结束代码片段 -->
METHOD 2:
要快速修复，您只需将以下内容添加到您的 CSS 中
#backToMode {
margin: 0 auto; // 将内容水平居中
}
英文:
METHOD 1:
I would suggest using flexbox for this scenario
Use css flexbox and it's properties
In the HTML file I've modified the structure a bit in order to use flexbox. Both parent div's should have display: flex as it's css property
For CSS in first div
display: flex // to set the display property to flex
justify-content: center // to place the content horizontally in the center
since the second div flex direction is set to column
flex-direction: column;
align-items: center // to place the content horizontally in the center
to read more about usage of flexbox refer:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I've also added common width to all the buttons so that when you click on a button the layout stays consistent
button {
width: 150px;
}
Below is the snippet
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function firstTurn(turn) {
if (turn == 'computer') {
ComputerMove();
}
if (turn == 'player') {
PlayerMove();
}
document.getElementById("turnButtons").style.display = "none";
}
function goBack() {
document.getElementById("modeButtons").style.display = "flex"; // change this to "flex"
document.getElementById("turnButtons").style.display = "none";
}
function changeMode(mode) {
if (mode === 'computer') {
// do something
}
if (mode === 'player') {
// do something
}
document.getElementById("modeButtons").style.display = "none";
document.getElementById("turnButtons").style.display = "flex"; // change this to "flex"
document.getElementById("backToMode").style.display = "block";
}
<!-- language: lang-css -->
.buttons {
display: flex;
justify-content: center;
}
.buttons2 {
flex-direction: column;
align-items: center;
}
button {
width: 150px;
}
.style1 {
background-color: #ff6b6b;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 20px;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
text-align: center;
}
.style1:hover {
background-color: #ff4d4d;
}
<!-- language: lang-html -->
<div id="modeButtons" class="buttons">
<button class="style1" id="modeComputer" onclick="changeMode('computer')"> Vs Computer</button>
<button class="style1" id="modePlayer" onclick="changeMode('player')"> Vs Player</button>
</div>
<div id="turnButtons" class='buttons2' style="display:none;">
<div class="buttons">
<button class="style1" id="firstComputer" onclick="firstTurn('computer')"> Computer first</button>
<button class="style1" id="firstPlayer" onclick="firstTurn('player')"> Player first</button>
</div>
<button class="style1" id="backToMode" onclick="goBack()">Back</button>
</div>
<!-- end snippet -->
METHOD 2:
for a quick fix you can just add this to your css
#backToMode {
margin: 0 auto; // to place you content horizontally in the center
}
答案3
得分: 0
你没有为函数computermove()和Playermove()提供任何实现，但你在FirstTurn()函数中调用了它们。所以请提供实现并调用它们，然后你就不会得到任何错误。
英文:
here you did not provide any implementation for for function computermove() and Playermove(),but you are calling in function FirstTurn().So provide implementation and call them then you will not get any errors
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论