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

时间：2018-06-21 23:43:02

标签： javascript html

我是Java语言的初学者，正在做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>

2 个答案:

答案 0 :(得分：3)

关于您的代码

首先，我想指出您的代码中的几个问题，并给您一些建议：

  • 写<span>而不是<spam>

  • <a>标签仅用于不需要<span><a>...</a></span>

    • 的链接

  • 尝试使用较少的ds和类名

  • 如果您不打算添加HTML，请不要使用.innerHTML，而应使用.textContent

  • 您的JavaScript代码太多余了：您已经定义了18个类似的函数！功能需要可重用。

提案

这是实现流程的方式。

  • 我们将向文档添加事件侦听器，以侦听页面内的所有单击。为此，我们将使用addEventListener。

    document.addEventListener('click', function() {})

    如您所见，它具有事件类型（'click'）和事件发生时将执行的回调函数。我们需要定义此回调。

  • 回调首先需要检查所单击的项目的确是按钮，并且其父项（如果有的话）具有类名：.round。

    const parent = event.target.parentElement;
if (parent && parent.classList.contains('round')) {
  ...
}

    如果符合条件，则表示用户单击了其中一个按钮。

  • 在if块中，我们可以开始使用event.target，它是已单击的元素（在我们的情况下，它将是<button>元素之一）。我们将首先保存一些变量：button（<button>元素），amount（按钮的值）和team（团队：'Red'或'Blue'。

    const button = event.target;
const amount = button.textContent;
const team = button.className.substr(3);

  • 然后我们将更新该回合的点：

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

  • 最后，使用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：

该功能允许获取指定球队的所有积分之和。它采用类型为className的参数String，可以是'resultRed'或'resultBlue'。

这是它的工作方式：

  1. 首先选择所有点元素，然后将querySelectorAll返回的选择扩展到数组中。

    [...document.querySelectorAll('.round '+className)]

  2. 然后我们可以像这样映射该数组，例如HTMLElement => Number使用.map 

    .map(e=> parseInt(e.textContent))

  3. 然后可以将生成的映射数组简化为一个整数：使用.reduce可以将数组中所有元素的总和。这是How to find the sum of an array of numbers上的堆栈溢出线程。

  4. 最后用计算出的总和total更改DOM中团队的总数。

结果是：

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;
};

答案 1 :(得分：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>

相关问题
最新问题