禁用段落元素

时间：2018-12-24 10:38:22

标签： javascript html

我正在尝试创建一个简单的井字游戏，我需要在单击p元素后​​将其禁用。我能够随机获得X和0，但无法弄清楚禁用P元素。提前致谢。如果还有其他要求，请通知我。这是我的代码：

var xValue = "x";


// function for alternating value of x 
function alternateX() {
  if (xValue === "x") {
    xValue = 0;
  } else {
    xValue = "x"
  }
}

// function to unbind a box
function box1Click() {

  alternateX();

  document.querySelector(".box1").textContent = xValue;
}


function box2Click() {

  alternateX();

  document.querySelector(".box2").textContent = xValue;
}

function box3Click() {

  alternateX();

  document.querySelector(".box3").textContent = xValue;
}

function box4Click() {

  alternateX();

  document.querySelector(".box4").textContent = xValue;
}

function box5Click() {

  alternateX();

  document.querySelector(".box5").textContent = xValue;
}

function box6Click() {

  alternateX();

  document.querySelector(".box6").textContent = xValue;
}

function box7Click() {

  alternateX();

  document.querySelector(".box7").textContent = xValue;
}

function box8Click() {

  alternateX();

  document.querySelector(".box8").textContent = xValue;
}

function box9Click() {

  alternateX();

  document.querySelector(".box9").textContent = xValue;
}
#container {
  margin-left: auto;
  margin-right: auto;
  height: 300px;
  width: 300px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-row-gap: 0px;
  grid-column-gap: 0px;
  grid-template-areas: "box1 box2 box3" "box4 box5 box6" "box7 box8 box9 ";
}

.box1 {
  grid-area: box1;
  width: 100px;
  border-style: solid;
  height: 100px;
  border-left: 0px;
  border-top: 0px;
  cursor: pointer;
}

.box2 {
  grid-area: box2;
  width: 100px;
  border-style: solid;
  height: 100px;
  border-top: 0px;
  cursor: pointer;
}

.box3 {
  grid-area: box3;
  width: 100px;
  border-style: solid;
  height: 100px;
  border-top: 0px;
  border-right: 0px;
  cursor: pointer;
}

.box4 {
  position: relative;
  margin-top: -18%;
  grid-area: box4;
  width: 100px;
  border-style: solid;
  height: 100px;
  border-left: 0px;
  border-top: 0px;
  cursor: pointer;
}

.box5 {
  margin-top: -18%;
  grid-area: box5;
  width: 100px;
  border-style: solid;
  height: 100px;
  border-top: 0px;
  cursor: pointer;
}

.box6 {
  margin-top: -18%;
  grid-area: box6;
  width: 100px;
  border-style: solid;
  height: 100px;
  border-top: 0px;
  border-right: 0px;
  cursor: pointer;
}

.box7 {
  margin-top: -17%;
  grid-area: box7;
  width: 100px;
  border-style: solid;
  height: 100px;
  border-left: 0px;
  border-top: 0px;
  border-bottom: 0px;
  cursor: pointer;
}

.box8 {
  margin-top: -17%;
  grid-area: box8;
  width: 100px;
  border-style: solid;
  height: 100px;
  border-top: 0px;
  border-bottom: 0px;
  cursor: pointer;
}

.box9 {
  margin-top: -17%;
  grid-area: box9;
  width: 100px;
  border-style: solid;
  height: 100px;
  border-top: 0px;
  border-bottom: 0px;
  border-right: 0px;
  cursor: pointer;
}
<div id="container">

  <p class="box1" onclick="box1Click()"></p>
  <p class="box2" onclick="box2Click()"></p>
  <p class="box3" onclick="box3Click()"></p>
  <p class="box4" onclick="box4Click()"></p>
  <p class="box5" onclick="box5Click()"></p>
  <p class="box6" onclick="box6Click()"></p>
  <p class="box7" onclick="box7Click()"></p>
  <p class="box8" onclick="box8Click()"></p>
  <p class="box9" onclick="box9Click()"></p>



</div>

4 个答案:

答案 0 :(得分：0)

disabled属性不适用于p元素。

看看这个https://www.w3schools.com/tags/att_disabled.asp

答案 1 :(得分：0)

如果之前单击过单击框，则可以将其单击处理程序修改为不执行任何操作（有效禁用框）：

function box1Click() {
    const val = document.querySelector(".box1").textContent;
    if (val !== '') return;
    alternateX();
    document.querySelector(".box1").textContent = xValue;
}

答案 2 :(得分：0)

添加document.querySelector(".box1").style.pointerEvents = "none";以禁用点击

var xValue = "x";


// function for alternating value of x 
function alternateX() {
  if (xValue === "x") {
    xValue = 0;
  } else {
    xValue = "x"
  }
}

// function to unbind a box
function box1Click() {

  alternateX();

  document.querySelector(".box1").textContent = xValue;
  document.querySelector(".box1").style.pointerEvents  = "none";
}


function box2Click() {

  alternateX();

  document.querySelector(".box2").textContent = xValue;
  document.querySelector(".box2").style.pointerEvents  = "none";
}

function box3Click() {

  alternateX();

  document.querySelector(".box3").textContent = xValue;
  document.querySelector(".box3").style.pointerEvents  = "none";
}

function box4Click() {

  alternateX();

  document.querySelector(".box4").textContent = xValue;
  document.querySelector(".box4").style.pointerEvents  = "none";
}

function box5Click() {

  alternateX();

  document.querySelector(".box5").textContent = xValue;
  document.querySelector(".box5").style.pointerEvents  = "none";
}

function box6Click() {

  alternateX();

  document.querySelector(".box6").textContent = xValue;
  document.querySelector(".box6").style.pointerEvents  = "none";
}

function box7Click() {

  alternateX();

  document.querySelector(".box7").textContent = xValue;
  document.querySelector(".box7").style.pointerEvents  = "none";
}

function box8Click() {

  alternateX();

  document.querySelector(".box8").textContent = xValue;
  document.querySelector(".box8").style.pointerEvents  = "none";
}

function box9Click() {

  alternateX();

  document.querySelector(".box9").textContent = xValue;
  document.querySelector(".box9").style.pointerEvents  = "none";
}
#container {
  margin-left: auto;
  margin-right: auto;
  height: 300px;
  width: 300px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-row-gap: 0px;
  grid-column-gap: 0px;
  grid-template-areas: "box1 box2 box3" "box4 box5 box6" "box7 box8 box9 ";
}

.box1 {
  grid-area: box1;
  width: 100px;
  border-style: solid;
  height: 100px;
  border-left: 0px;
  border-top: 0px;
  cursor: pointer;
}

.box2 {
  grid-area: box2;
  width: 100px;
  border-style: solid;
  height: 100px;
  border-top: 0px;
  cursor: pointer;
}

.box3 {
  grid-area: box3;
  width: 100px;
  border-style: solid;
  height: 100px;
  border-top: 0px;
  border-right: 0px;
  cursor: pointer;
}

.box4 {
  position: relative;
  margin-top: -18%;
  grid-area: box4;
  width: 100px;
  border-style: solid;
  height: 100px;
  border-left: 0px;
  border-top: 0px;
  cursor: pointer;
}

.box5 {
  margin-top: -18%;
  grid-area: box5;
  width: 100px;
  border-style: solid;
  height: 100px;
  border-top: 0px;
  cursor: pointer;
}

.box6 {
  margin-top: -18%;
  grid-area: box6;
  width: 100px;
  border-style: solid;
  height: 100px;
  border-top: 0px;
  border-right: 0px;
  cursor: pointer;
}

.box7 {
  margin-top: -17%;
  grid-area: box7;
  width: 100px;
  border-style: solid;
  height: 100px;
  border-left: 0px;
  border-top: 0px;
  border-bottom: 0px;
  cursor: pointer;
}

.box8 {
  margin-top: -17%;
  grid-area: box8;
  width: 100px;
  border-style: solid;
  height: 100px;
  border-top: 0px;
  border-bottom: 0px;
  cursor: pointer;
}

.box9 {
  margin-top: -17%;
  grid-area: box9;
  width: 100px;
  border-style: solid;
  height: 100px;
  border-top: 0px;
  border-bottom: 0px;
  border-right: 0px;
  cursor: pointer;
}
<div id="container">

  <p class="box1" onclick="box1Click()"></p>
  <p class="box2" onclick="box2Click()"></p>
  <p class="box3" onclick="box3Click()"></p>
  <p class="box4" onclick="box4Click()"></p>
  <p class="box5" onclick="box5Click()"></p>
  <p class="box6" onclick="box6Click()"></p>
  <p class="box7" onclick="box7Click()"></p>
  <p class="box8" onclick="box8Click()"></p>
  <p class="box9" onclick="box9Click()"></p>



</div>

答案 3 :(得分：0)

var xValue = "x";


// function for alternating value of x 
function alternateX() {
  if (xValue === "x") {
    xValue = 0;
  } else {
    xValue = "x"
  }
  return xValue;
}

// function to unbind a box
function boxClick(element) {
  if(element.getAttribute("data-is-disable") == true){ return }

  element.setAttribute("data-is-disable", true);
  element.textContent = alternateX();
}

您需要通过选择p[data-is-disable='true']{ }来显示某些样式，以指定CSS。

<div id="container">

  <p class="box1" onclick="boxClick(this)"></p>
  <p class="box2" onclick="boxClick(this)"></p>
  <p class="box3" onclick="boxClick(this)"></p>
  <p class="box4" onclick="boxClick(this)"></p>
  <p class="box5" onclick="boxClick(this)"></p>
  <p class="box6" onclick="boxClick(this)"></p>
  <p class="box7" onclick="boxClick(this)"></p>
  <p class="box8" onclick="boxClick(this)"></p>
  <p class="box9" onclick="boxClick(this)"></p>



</div>
相关问题
最新问题