单击 "div" 后，将添加 href 元素并加载 link

Question

我正在尝试做一个小项目，如果我点击错误 div，另一个网页会立即加载（例如这里 google 加载）。 HTML 和 Javascript 代码如下。

我在概念上做错了什么？甚至在代码方面，我哪里错了

function get_random_box_id(clicked) {
  var check = document.getElementById(clicked);
  if (check.classList.contains('box_to_select')) {
    check.classList.remove('box_to_select');
    var random_box_number_second = box[Math.floor(Math.random() * 6)];
    random_box_number_second.classList.add('box_to_select');
  } else {
    check.onclick = function() {
      this.innerHTML = "<a href ='" + www.google.com + "'> </a>";
    };
  }

}

<div id="table1">
  <table class="center">
    <tr>
      <th>
        <div class="box" id="box1" onclick="get_random_box_id(this.id)">1</div>
      </th>
      <th>
        <div class="box" id="box2" onclick="get_random_box_id(this.id)">2</div>
      </th>
      <th>
        <div class="box" id="box3" onclick="get_random_box_id(this.id)">3</div>
      </th>
    </tr>
    <tr>
      <td>
        <div class="box" id="box4" onclick="get_random_box_id(this.id)">4</div>
      </td>
      <td>
        <div class="box" id="box5" onclick="get_random_box_id(this.id)">5</div>
      </td>
      <td>
        <div class="box" id="box6" onclick="get_random_box_id(this.id)">6</div>
      </td>
    </tr>
  </table>

Answer 1

很多事情

不要将 div 包裹在 tds 或 ths 中
没有内联事件处理程序，而是像我下面那样委托
至少要一盒到select
不要嵌套引号并且www.google.com不是变量
```
'<a href="https://www.google.com">Google</a>';
```

不会立即更改 - 下面的代码会

const boxes = document.querySelectorAll(".box");
document.getElementById("table1").addEventListener("click", function(e) {
  const clicked = e.target;
  if (clicked.classList.contains('box_to_select')) {
    clicked.classList.remove('box_to_select');
    const random_box_number_second = Math.floor(Math.random() * boxes.length);
    console.log(random_box_number_second)
    boxes[random_box_number_second].classList.add('box_to_select');
  } else {
    location = "https://www.google.com"; // change page
  }
});

.box_to_select { color:red }

<table class="center" id="table1">
  <thead>
    <tr>
      <th class="box" id="box1">1</th>
      <th class="box box_to_select" id="box2">2</th>
      <th class="box" id="box3">3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="box" id="box4">4</td>
      <td class="box" id="box5">5</td>
      <td class="box" id="box6">6</td>
    </tr>
  </tbody>
</table>

Answer 2

首先，您需要一个正确的标识符。现在您应该向所有人添加一个事件。

const divs = document.querySelectorAll('.box')

divs.forEach(div => {
  console.log(div);

  // If the right box
  if (div.classList.contains('box_to_select')) {
    div.addEventListener('click', () => {
      // right stuff
      console.log('right box');
    })


    // If not the right one
  } else {

    div.addEventListener('click', () => {
      // go to google.
      console.log('google');
    })
  }
});

<table class="center">
  <tr>
    <th>
      <div class="box box_to_select" id="box1" onclick="get_random_box_id(this.id)">1</div>
    </th>
    <th>
      <div class="box" id="box2" onclick="get_random_box_id(this.id)">2</div>
    </th>
    <th>
      <div class="box" id="box3" onclick="get_random_box_id(this.id)">3</div>
    </th>
  </tr>
  <tr>
    <td>
      <div class="box" id="box4" onclick="get_random_box_id(this.id)">4</div>
    </td>
    <td>
      <div class="box" id="box5" onclick="get_random_box_id(this.id)">5</div>
    </td>
    <td>
      <div class="box" id="box6" onclick="get_random_box_id(this.id)">6</div>
    </td>
  </tr>
</table>

Answer 3

如果我理解你真正想要什么：如果你点击“错误”div，你将被重定向到 google 这个例子（基于你的提交：“另一个网页立即加载") -> 您只是在注册新的 onclick 事件，而不是实际触发它。

此代码（这是错误的，因为 www.google.com 不是变量，但无论如何...）将只注册新的 onclick 事件：

check.onclick = function() {
  this.innerHTML = "<a href ='" + www.google.com + "'> </a>";
};

尝试这样的事情：

const boxes = document.getElementsByClassName('box');
for (let i = 0; i < boxes.length; i++) {
    boxes[i].onclick = (ev) => {
    if (ev.currentTarget.classList.contains('box_to_select')) {
        //do action
    } else {
        window.location.replace("http://google.com");
    }
  };
}

单击 "div" 后，将添加 href 元素并加载 link

Once i click on a "div", the href element be added and that link be loaded

html

javascript

anchor

jquery

frontend