如何访问onclick事件的更改值？

Question

如何访问onclick事件的更改值？

3

我是javascript的初学者，正在制作一个MMA比分系统，我想知道如何访问result1Red更改后的值。

<span><a id="result1Red">0</a></span>

通过选择其中一个按钮来激活其相应函数，从而改变它。

function tenRed1() {
  var i = 10;
  result1Red += 1*i;
  if (result1Red > 10) {return;}
  document.getElementById("result1Red").innerHTML = result1Red;
};

function nineRed1() {
  var i = 9;
  result1Red += 1*i;
  if (result1Red > 10) {return;}
  document.getElementById("result1Red").innerHTML = result1Red;
};

function eightRed1() {
  var i = 8;
  result1Red += 1*i;
  if (result1Red > 10) {return;}
  document.getElementById("result1Red").innerHTML = result1Red;
};

当我使用"innerHTML"时，它返回0（初始值），而不是确定的值。我需要这个值与其他输入相加，并得到总结果。

完整的代码：

// Round 1
function tenRed1() {
  var i = 10;
  result1Red += 1*i;
  if (result1Red > 10) {return;}
  document.getElementById("result1Red").innerHTML = result1Red;
};

function nineRed1() {
  var i = 9;
  result1Red += 1*i;
  if (result1Red > 10) {return;}
  document.getElementById("result1Red").innerHTML = result1Red;
};

function eightRed1() {
  var i = 8;
  result1Red += 1*i;
  if (result1Red > 10) {return;}
  document.getElementById("result1Red").innerHTML = result1Red;
};

function tenBlue1() {
  var i = 10;
  result1Blue += 1*i;
  if (result1Blue > 10) {return;}
  document.getElementById("result1Blue").innerHTML = result1Blue;
};

function nineBlue1() {
  var i = 9;
  result1Blue += 1*i;
  if (result1Blue > 10) {return;}
  document.getElementById("result1Blue").innerHTML = result1Blue;
};

function eightBlue1() {
  var i = 8;
  result1Blue += 1*i;
  if (result1Blue > 10) {return;}
  document.getElementById("result1Blue").innerHTML = result1Blue;
}


// Round 2
function tenRed2() {
  var i = 10;
  result2Red += 1*i;
  if (result2Red > 10) {return;}
  document.getElementById("result2Red").innerHTML = result2Red;
};

function nineRed2() {
  var i = 9;
  result2Red += 1*i;
  if (result2Red > 10) {return;}
  document.getElementById("result2Red").innerHTML = result2Red;
};

function eightRed2() {
  var i = 8;
  result2Red += 1*i;
  if (result2Red > 10) {return;}
  document.getElementById("result2Red").innerHTML = result2Red;
};

function tenBlue2() {
  var i = 10;
  result2Blue += 1*i;
  if (result2Blue > 10) {return;}
  document.getElementById("result2Blue").innerHTML = result2Blue;
};

function nineBlue2() {
  var i = 9;
  result2Blue += 1*i;
  if (result2Blue > 10) {return;}
  document.getElementById("result2Blue").innerHTML = result2Blue;
};

function eightBlue2() {
  var i = 8;
  result2Blue += 1*i;
  if (result2Blue > 10) {return;}
  document.getElementById("result2Blue").innerHTML = result2Blue;
};


// Round 3
function tenRed3() {
  var i = 10;
  result3Red += 1*i;
  if (result3Red > 10) {return;}
  document.getElementById("result3Red").innerHTML = result3Red;
};

function nineRed3() {
  var i = 9;
  result3Red += 1*i;
  if (result3Red > 10) {return;}
  document.getElementById("result3Red").innerHTML = result3Red;
};

function eightRed3() {
  var i = 8;
  result3Red += 1*i;
  if (result3Red > 10) {return;}
  document.getElementById("result3Red").innerHTML = result3Red;
};

function tenBlue3() {
  var i = 10;
  result3Blue += 1*i;
  if (result3Blue > 10) {return;}
  document.getElementById("result3Blue").innerHTML = result3Blue;
};

function nineBlue3() {
  var i = 9;
  result3Blue += 1*i;
  if (result3Blue > 10) {return;}
  document.getElementById("result3Blue").innerHTML = result3Blue;
};

function eightBlue3() {
  var i = 8;
  result3Blue += 1*i;
  if (result3Blue>  10) {return;}
  document.getElementById("result3Blue").innerHTML = result3Blue;
};

<html>
<head>
 <title>MMAScore Beta</title>
 <link rel="styleesheet" type="text/css" href="style/style.css">
</head>
<body>

<header>
 <h1>mmaScore 0.1 Version</h1>
</header>

<!-- Round 1 -->
<div class="roundOne">
 <button type="button" onclick="eightRed1()">8</button>
 <button type="button" onclick="nineRed1()">9</button>
 <button type="button" onclick="tenRed1()">10</button>
 <span><a id="result1Red">0</a></span> - 
 <span><a id="result1Blue">0</a></span>
 <button type="button" onclick="tenBlue1()">10</button>
 <button type="button" onclick="nineBlue1()">9</button>
 <button type="button" onclick="eightBlue1()">8</button>
</div>
<!-- Round 2 -->
<div class="roundTwo">
 <button type="button" onclick="eightRed2()">8</button>
 <button type="button" onclick="nineRed2()">9</button>
 <button type="button" onclick="tenRed2()">10</button>
 <span><a id="result2Red">0</a></span> - 
 <span><a id="result2Blue">0</a></span>
 <button type="button" onclick="tenBlue2()">10</button>
 <button type="button" onclick="nineBlue2()">9</button>
 <button type="button" onclick="eightBlue2()">8</button>
</div>
<!-- Round 3 -->
<div class="roundThree">
 <button type="button" onclick="eightRed3()">8</button>
 <button type="button" onclick="nineRed3()">9</button>
 <button type="button" onclick="tenRed3()">10</button>
 <span><a id="result3Red">0</a></span> - 
 <span><a id="result3Blue">0</a></span>
 <button type="button" onclick="tenBlue3()">10</button>
 <button type="button" onclick="nineBlue3()">9</button>
 <button type="button" onclick="eightBlue3()">8</button>
</div>



<h3>Total:</h3>
<span id="resultRed">0</span> - 
<span id="resultBlue">0</span>
<footer>
</footer>



<script type="text/javascript" src="script/script.js"></script>
</body>
</html>

- Rodrigo Liva

1

应该是 span 而不是 spam :) - Walid Ammar

你在哪里尝试访问那个值？ - alanfcm

result1Red += 1*i ... 但是 result1Red 在哪里初始化了呢？ - Jaromanda X

你在每个函数中需要的是：var result1Red = Number(document.getElementById("result1Red").innerHTML) - 在 result1Red += 等语句之前。 - Jaromanda X

我已经在我的代码中添加了解释。享受吧。 - Ivan

2个回答

1

在我完成这篇文章时，发现该帖子已经有一个被接受的答案和4个赞。不过我还是要发布它，供参考。

NodeList.prototype.map=Array.prototype.map;

const sum=()=>{
 resultRed.innerText=document.querySelectorAll(".resultRed").map(x=>x.innerText).reduce((a,b)=>Number(a)+Number(b));
 resultBlue.innerText=document.querySelectorAll(".resultBlue").map(x=>x.innerText).reduce((a,b)=>Number(a)+Number(b));
}

for(const cn of document.querySelectorAll("body>div").map(x=>x.className)){
 const parent=document.getElementsByClassName(cn)[0];
 parent.querySelectorAll("button").forEach((v,i)=>{
  if(i<=2) v.onclick=()=>{
   parent.querySelector(".resultRed").innerText=v.innerText;
   sum();
  }
  else v.onclick=()=>{
   parent.querySelector(".resultBlue").innerText=v.innerText;
   sum();
  }
 });
}

<!-- Round 1 -->
<div class="roundOne">
 <button type="button">8</button>
 <button type="button">9</button>
 <button type="button">10</button>
 <spam><a class="resultRed">0</a></spam> - 
 <spam><a class="resultBlue">0</a></spam>
 <button type="button">10</button>
 <button type="button">9</button>
 <button type="button">8</button>
</div>
<!-- Round 2 -->
<div class="roundTwo">
 <button type="button">8</button>
 <button type="button">9</button>
 <button type="button">10</button>
 <spam><a class="resultRed">0</a></spam> - 
 <spam><a class="resultBlue">0</a></spam>
 <button type="button">10</button>
 <button type="button">9</button>
 <button type="button">8</button>
</div>
<!-- Round 3 -->
<div class="roundThree">
 <button type="button">8</button>
 <button type="button">9</button>
 <button type="button">10</button>
 <spam><a class="resultRed">0</a></spam> - 
 <spam><a class="resultBlue">0</a></spam>
 <button type="button">10</button>
 <button type="button">9</button>
 <button type="button">8</button>
</div>



<h3>Total:</h3>
<spam id="resultRed">0</spam> - 
<spam id="resultBlue">0</spam>
<footer>
</footer>

- Liang

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ivan · Accepted Answer

关于你的代码

首先，我想指出你的代码存在一些问题，并给你一些建议：

应该写 <span> 而不是 <spam>
<a> 标签只用于链接，不需要使用 <span><a>...</a></span>
尽量少使用 id 和 class 名称
如果你不打算添加 HTML，请不要使用.innerHTML，而应该使用.textContent
你的 JavaScript 代码太过冗余：你定义了18个类似的函数！函数应该具有可重用性。

一个建议

以下是你如何实现你的流程。

we will add an event listener to the document to listen to any clicks inside the page. We'll use addEventListener for that.
```
document.addEventListener('click', function() {})
```
As you can see it takes the event type ('click') and a callback function that it will execute when the event happens. We need to define this callback.
The callback needs to first check that the clicked item is indeed a button and it's parent (if he has any) has the class name: .round.
```
const parent = event.target.parentElement;
if (parent && parent.classList.contains('round')) {
  ...
}
```
If the condition is met then it means the user has clicked on one of the buttons.
In the if block we can start working with event.target which is the element that has been clicked (in our case it will be one of the <button> element). We will start by saving some variables: button (the <button> element), amount (the button's value) and team (the team: either 'Red' or 'Blue').
```
const button = event.target;
const amount = button.textContent;
const team = button.className.substr(3);
```

Then we will update the round's point:

parent.querySelector('.result'+team).textContent = amount;

And finally, update the total amount using updateTotals:
```
updateTotals('.result'+team);
```

完整代码：

const updateTotals = function(className) {
  const total = [...document.querySelectorAll('.round '+className)]
    .map(e=> parseInt(e.textContent))
    .reduce((a,b) => a+b);
  document.querySelector('.results > '+className).textContent = total;
};

document.addEventListener('click', function() {
  const parent = event.target.parentElement;
  if (parent && parent.classList.contains('round')) { // this is a <button>
  
    const button = event.target;
    const amount = button.textContent;
    const team = button.className.substr(3);
    
    // update team score
    parent.querySelector('.result'+team).textContent = amount;
    
    // update total for each team
    updateTotals('.result'+team);
    
  }
});

<h1>mmaScore 0.1 Version</h1>

<!-- Round 1 -->
<div class="round round1">
  <button class="btnRed" type="button">8</button>
  <button class="btnRed" type="button">9</button>
  <button class="btnRed" type="button">10</button>
  <span class="resultRed">0</span> -
  <span class="resultBlue">0</span>
  <button class="btnBlue" type="button">10</button>
  <button class="btnBlue" type="button">9</button>
  <button class="btnBlue" type="button">8</button>
</div>

<!-- Round 2 -->
<div class="round round2">
  <button class="btnRed" type="button">8</button>
  <button class="btnRed" type="button">9</button>
  <button class="btnRed" type="button">10</button>
  <span class="resultRed">0</span> -
  <span class="resultBlue">0</span>
  <button class="btnBlue" type="button">10</button>
  <button class="btnBlue" type="button">9</button>
  <button class="btnBlue" type="button">8</button>
</div>

<!-- Round 3 -->
<div class="round round3">
  <button class="btnRed" type="button">8</button>
  <button class="btnRed" type="button">9</button>
  <button class="btnRed" type="button">10</button>
  <span class="resultRed">0</span> -
  <span class="resultBlue">0</span>
  <button class="btnBlue" type="button">10</button>
  <button class="btnBlue" type="button">9</button>
  <button class="btnBlue" type="button">8</button>
</div>

<h3>Total:</h3>
<div class="results">
  <span class="resultRed">0</span> -
  <span class="resultBlue">0</span>
</div>

关于 updateTotals:

该函数允许计算指定团队的所有积分总和。它以 String 类型的 className 为参数，可以是 'resultRed' 或 'resultBlue'。

它的工作原理如下：

it starts by selecting all of the point elements and spreading the selection returned by querySelectorAll into an array.
```
[...document.querySelectorAll('.round '+className)]
```
then we can map this array like so HTMLElement => Number using .map
```
.map(e=> parseInt(e.textContent))
```
then the resulting mapped array can be reduced to a single integer: the sum of all the elements of the array using a .reduce. Here's a Stack Overflow thread on How to find the sum of an array of numbers.
Finally change the team's total count in the DOM with the calculated sum total.

因此，我们有：

const updateTotals = function(className) {
  const total = [...document.querySelectorAll('.round '+className)]
    .map(e=> parseInt(e.textContent))
    .reduce((a,b) => a+b);
  document.querySelector('.results > '+className).textContent = total;
};