javascript-如何访问onclick事件的更改值？
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript-如何访问onclick事件的更改值？，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9031字，纯文字阅读大概需要13分钟。
内容图文
我是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>解决方法:
关于你的代码
首先,我想指出一些与您的代码有关的问题,并给您一些建议：
>写< span>代替< spam>
>< a>标签仅用于您不需要< span< a> …< / a< / span>
>尝试使用较少的名称和类名
>如果您不打算添加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>元素),数量(按钮的值)和组(组：“红色”或“蓝色”).
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>关于更新总计：
该功能允许获取指定团队的所有积分之和.它以String类型的className作为参数,可以是’resultRed’或’resultBlue’.
运作方式如下：
>首先,选择所有点元素,然后将querySelectorAll返回的选择扩展到数组中.
[...document.querySelectorAll('.round '+className)]
>然后我们可以像这样映射该数组,例如HTMLElement =>号码使用.map
.map(e=> parseInt(e.textContent))
>然后可以将生成的映射数组简化为一个整数：使用.reduce的数组所有元素的总和.这是How to find the sum of an array of numbers上的堆栈溢出线程.
>最后,使用计算出的总数更改团队在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;
};
内容总结
以上是互联网集市为您收集整理的javascript-如何访问onclick事件的更改值？全部内容，希望文章能够帮你解决javascript-如何访问onclick事件的更改值？所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】