javascript - 如何访问 onclick 事件的更改值？-6ren

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

转载作者：搜寻专家更新时间：2023-10-31 23:17:40

我是 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>
尽量少用 ìds 和类名
不要使用 .innerHTML 如果您不打算添加 HTML，请使用 .textContent 相反
您的 JavaScript 代码过于冗余:您已经定义了 18 个相似的函数!函数需要可重用。

提案

以下是您可以如何实现您的流程。

我们将向文档添加事件监听器以监听页面内的任何点击。我们将使用 addEventListener 为此。
```
document.addEventListener('click', function() {})
```
如您所见，它采用事件类型 ( 'click' ) 和事件发生时将执行的回调函数。我们需要定义这个回调。
回调需要首先检查被点击的项目确实是一个按钮并且它的父级(如果他有的话)有类名:.round .
```
const parent = event.target.parentElement;
if (parent && parent.classList.contains('round')) {
  ...
}
```
如果满足条件则表示用户点击了其中一个按钮。
在 if block 中，我们可以开始处理 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' .

这是它的工作原理:

它首先选择所有点元素并展开 querySelectorAll 返回的选择成一个数组。
```
[...document.querySelectorAll('.round '+className)]
```
然后我们可以像这样映射这个数组 HTMLElement => Number using .map
```
.map(e=> parseInt(e.textContent))
```
然后生成的映射数组可以简化为单个整数:使用 .reduce 对数组所有元素的总和.这是关于 How to find the sum of an array of numbers 的 Stack Overflow 线程.
最后用计算出的总和更改 DOM 中团队的总数 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;
};

关于javascript - 如何访问 onclick 事件的更改值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50978820/

文章推荐： node.js - 使用 grunt 编译时的内存问题

文章推荐： php - laravel 5.2 将数据传递给注册 View

文章推荐： php - Laravel 5.1 + Vue.js - vue-router beforeEach AuthService

文章推荐： node.js - 将来自 resemble.js 的缓冲区响应写入文件

javascript - php 访问 mqsql 或 html 访问 json 或 html 访问 xml ？哪个更快？
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 4 年前。 Improv
powershell - API 访问 PowerShell Web 访问？
PowerShell Web Access 允许您通过 Web 浏览器运行 PowerShell cmdlet。它显示了一个基于 Web 的控制台窗口。有没有办法运行 cmdlet 而无需在控制台窗
c# - 如何使用应用程序级身份验证/访问 token 访问 Sharepoint 文件？
我尝试在无需用户登录的情况下访问 Sharepoint 文件。我可以通过以下任一方式获取访问 token 方法一: var client = new RestClient("https://logi
soap - 使用 OAuth 访问 token 访问 SOAP 服务？
我目前正在尝试通过 Chrome 扩展程序访问 Google 服务。我的理解是，对于 JS 应用程序，Google 首选的身份验证机制是 OAuth。我的应用目前已成功通过 OAuth 向服务进行身份
C++ - 允许通过基类(接口(interface))访问，禁止通过派生类(具体实现)访问？
假设我有纯抽象类 IHandler 和派生自它的类: class IHandler { public: virtual int process_input(char input) = 0; };
css - 可以通过 URL 访问 CSS 文件，但不能从 HTML 访问
我有一个带有 ThymeLeaf 和 Dojo 的 Spring 应用程序，这给我带来了问题。当我从我的 HTML 文件中引用 CSS 文件时，它们在 Firebug 中显示为中止。但是，当我通过在地
javascript - 为什么我可以用 [val] 访问 js 对象，但不能用 .val 访问？
这个问题已经有答案了: JavaScript property access: dot notation vs. brackets? (17 个回答) 已关闭 6 年前。为什么这不起作用？ func
.htaccess - 仅允许通过 http 访问 robot.txt，其他通过 https 访问
我想将所有流量重定向到 https，只有 robot.txt 应该可以通过 http 访问。是否可以为 robot.txt 文件创建异常(exception)？我的 .htaccess 文件: R
oauth-2.0 - 无法使用有效的 oauth2 访问 token 访问 Linkedin 个人资料
我遇到了 LinkedIn OAuth2: "Unable to verify access token" 中描述的相同问题;但是，那里描述的解决方案并不能解决我的问题。我能够成功请求访问 toke
Docker 容器不能通过 localhost 访问，但可以通过 127.0.0.1 访问
问题我有一个暴露给 *:8080 的 Docker 服务容器. 我无法通过 localhost:8080 访问容器. Chrome /curl无限期挂断。但是如果我使用任何其他本地IP，我就可以访
python - 使用 OAuth 2.0 访问 token 访问 Gmail Imap
我正在使用 Google 的 Oauth 2.0 来获取用户的 access_token，但我不知道如何将它与 imaplib 一起使用来访问收件箱。最佳答案下面是带有 oauth 2.0 的 I
curl - 可以从 curl 访问 docker 服务，但不能从 postman/chrome 访问
我正在做 docker 入门指南:https://docs.docker.com/get-started/part3/#recap-and-cheat-sheet-optional docker-co
azure - 带有 Nginx 的 AKS 无法通过 IP 访问，只能通过 DNS 访问
我正在尝试使用静态 IP 在 AKS 上创建一个 Web 应用程序，自然找到了一个带有 Nginx ingress controller in Azure's documentation 的解决方案。
javascript - 为什么可以将 'module.exports' 作为 'exports' 访问，但不能使用 'module.id' 访问？
这是我在名为 foo.js 的文件中的代码。 console.log('module.exports:', module.exports) console.log('module.id:', modu
amazon-web-services - aws 访问 key ID 和 secret 访问 key
我试图理解访问键。我读过https://docs.aws.amazon.com/general/latest/gr/aws-sec-cred-types.html#access-keys-and-se
xcode - 从 iOS 5 访问 Twitter 时 OAuth 访问 token 失败
我正在使用 MGTwitterEngine"将 twitter 集成到我的应用程序中。它在 iOS 4.2 上运行良好。当我尝试从任何 iOS 5 设备访问 twitter 时，我遇到了身份验证 to
amazon-web-services - aws 访问 key ID 和 secret 访问 key
我试图理解访问键。我读过https://docs.aws.amazon.com/general/latest/gr/aws-sec-cred-types.html#access-keys-and-se
ios - 如果 Facebook 访问 token 过期，会生成新的 Facebook 访问 token 吗？
我正在使用以下 API 列出我的 Facebook 好友。 https://graph.facebook.com/me/friends?access_token= ??? 我想知道访问 token 过
google-app-engine - 尝试使用 API key 访问 BigQuery 时出错(简单 API 访问)
401 Unauthorized - Show headers - { "error": { "errors": [ { "domain": "global", "reas
django - 从 heroku 访问 s3 内容时，AWS 访问 key 显示在浏览器 url 中
我已经将我的 django 应用程序部署到 heroku 并使用 Amazon s3 存储桶存储静态文件，我发现从 s3 存储桶到 heroku 获取数据没有问题。但是，当我测试查看内容存储位置时，除

搜寻专家

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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

关于您的代码

提案