javascript - 第三次是一个魅力......也许-6ren

javascript - 第三次是一个魅力......也许

转载作者：行者123 更新时间：2023-11-28 01:07:56

我仍在尝试从单元格收集信息，使用该信息执行函数，然后将结果返回到不同的单元格。我知道这是可能的，但我正在努力解决这个问题。我在这里收到的许多提示引导我找到了以我理解的方式表达的大量信息。我希望这种事能再次发生——这让我发疯。以下代码已在 Liveweave 上测试，没有显示错误。但它仍然不起作用。有什么想法吗？

JAVACSCRIPT

calculate = function(){
var total1= (document.form[0].mark1.value) +(document.form[0].mark2.value) + (document.form[0].mark3.value);
  document.form[0].total.value = total1;
  return total1;
};

HTML

<form>
  <table>




    <tr>
      <th>Name</th>
      <th>Date</th>
      <th>Date</th>
      <th>Date</th>
      <th>Date</th>
      <th>Date</th>
      <th>Final</th>
    </tr>
    <tr>
      <td>Name1</td>
      <td class="mark1">34</td>
      <td class="mark2">77</td>
      <td class="mark3">99</td>
      <td>0</td>
      <td>0</td>
      <td class="total" placeholder="0">0</td>
    </tr>
  </table><br/>
<input type="button" value="Calculate" onclick="calculate"/>
<!-- End your code here -->
  </form>

任何帮助将不胜感激。干杯，彼得

最佳答案

唯一具有 value 的 DOM 元素属性是表单字段( <input> 、 <textarea> 、 <select> )。您的示例中没有任何内容，因此您不能使用 value来获取它们。

同样，您无法使用 container.theClass 访问具有类名的元素。，所以document.form[0].mark1不会给你<td class="mark1">...</td>表单中表格中的单元格。

要访问元素，主要工具是:

querySelector - 查找容器中与 CSS 选择器匹配的第一个元素
querySelectorAll - 查找容器中与 CSS 选择器匹配的所有元素
document.getElementById - 查找具有给定 id 的一个元素值

要获取非表单单元格内的文本(非值)，您可以使用 innerHTML (它为您提供 HTML 标记，但在您的情况下，这只是数字的文本)。然后我们解析该文本以获取数字。

在您的示例中，我们可以使用 document.querySelector(".mark1") 找到我们关心的元素和类似的。

function calculate(){
    var mark1 = document.querySelector(".mark1");
    var mark2 = document.querySelector(".mark2");
    var mark3 = document.querySelector(".mark3");
    var total = document.querySelector(".total");
    var sum   = parseInt(mark1.innerHTML, 10) +
                parseInt(mark2.innerHTML, 10) +
                parseInt(mark3.innerHTML, 10);
    total.innerHTML = String(sum);
}

请注意，这假设您只想使用第一个(唯一的)单元格。如果您有多个表单/表格并希望在每个表单/表格中工作，您可能会希望采取稍微不同的方式，也许可以通过将表单元素传递到函数中来实现:

function calculate(form){
    var mark1 = form.querySelector(".mark1");
    var mark2 = form.querySelector(".mark2");
    var mark3 = form.querySelector(".mark3");
    var total = form.querySelector(".total");
    var sum   = parseInt(mark1.innerHTML, 10) +
                parseInt(mark2.innerHTML, 10) +
                parseInt(mark3.innerHTML, 10);
    total.innerHTML = String(sum);
}

注意我如何使用form.querySelector而不是document.querySelector 。这会找到第一个匹配元素，但仅在表单内查找。因此，如果我们有三种形式，我们可以这样做:

var forms = document.querySelectorAll("form"); // Note the "All"
var index;
for (index = 0; index < forms.length; ++index) {
    calculate(forms[index]);
}

Live copy with three forms (来源位于答案末尾)

这就是使用类而不是 id 的原因s。 id s 对于页面上唯一的内容很有用，但通常更喜欢使用类来提高灵 active 。

<小时/>

旁白:请注意我如何更改函数的创建方式。以上是声明函数的正常方法。您正在做的是另一种方法，它使用表达式创建函数并将其分配给变量。但您没有声明该变量，因此您的代码成为 The Horror of Implicit Globals 的牺牲品。如果您更喜欢使用表达式，请声明变量:

var calculate = function(){
    var mark1 = document.querySelector(".mark1");
    var mark2 = document.querySelector(".mark2");
    var mark3 = document.querySelector(".mark3");
    var total = document.querySelector(".total");
    var sum   = parseInt(mark1.innerHTML, 10) +
                 parseInt(mark2.innerHTML, 10) +
                 parseInt(mark3.innerHTML, 10);
    total.innerHTML = String(sum);
};

<小时/>

三种表单示例的来源:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
</head>
<body>
  <p>First form</p>
  <form>
    <table>
      <tr>
        <th>Name</th>
        <th>Date</th>
        <th>Date</th>
        <th>Date</th>
        <th>Date</th>
        <th>Date</th>
        <th>Final</th>
      </tr>
      <tr>
        <td>Name1</td>
        <td class="mark1">34</td>
        <td class="mark2">77</td>
        <td class="mark3">99</td>
        <td>0</td>
        <td>0</td>
        <td class="total">0</td>
      </tr>
    </table>
  </form>  
  <p>Second form</p>
  <form>
    <table>
      <tr>
        <th>Name</th>
        <th>Date</th>
        <th>Date</th>
        <th>Date</th>
        <th>Date</th>
        <th>Date</th>
        <th>Final</th>
      </tr>
      <tr>
        <td>Name1</td>
        <td class="mark1">4</td>
        <td class="mark2">7</td>
        <td class="mark3">18</td>
        <td>0</td>
        <td>0</td>
        <td class="total">0</td>
      </tr>
    </table>
  </form>  
  <p>Third form</p>
  <form>
    <table>
      <tr>
        <th>Name</th>
        <th>Date</th>
        <th>Date</th>
        <th>Date</th>
        <th>Date</th>
        <th>Date</th>
        <th>Final</th>
      </tr>
      <tr>
        <td>Name1</td>
        <td class="mark1">1</td>
        <td class="mark2">2</td>
        <td class="mark3">3</td>
        <td>0</td>
        <td>0</td>
        <td class="total">0</td>
      </tr>
    </table>
  </form>  
  <div><input type="button" value="Calculate" onclick="calculate"></div>
<script>
  function calculate(form){
    var mark1 = form.querySelector(".mark1");
    var mark2 = form.querySelector(".mark2");
    var mark3 = form.querySelector(".mark3");
    var total = form.querySelector(".total");
    var sum   = parseInt(mark1.innerHTML, 10) +
                parseInt(mark2.innerHTML, 10) +
                parseInt(mark3.innerHTML, 10);
    total.innerHTML = String(sum);
  }

  var forms = document.querySelectorAll("form"); // Note the "All"
  var index;
  for (index = 0; index < forms.length; ++index) {
    calculate(forms[index]);
  }
</script>
</body>
</html>

关于javascript - 第三次是一个魅力......也许，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24841600/

文章推荐： c# - Visual Studio 和 Eclipse 哪个更好

文章推荐： html - 右上角带有图标的文本

haskell - func::也许(Int) -> 也许(Int)
我做了一些研究，但没有找到任何东西。我不明白这样的函数是如何工作的: func :: Maybe (Int) -> Maybe (Int) 我应该如何进行模式匹配？我已经尝试过，但没有成功: func
javascript 缓存(也许)？
我需要从屏幕上删除一个元素，然后重新生成一个具有相同名称的元素。代码中有一个deleteObject函数和一个appendChild调用。在deleteObject函数中，它使用removeChi
Haskell - 也许/只是递归
我读了一些关于 monad 的帖子和博客，也许，只是，什么都没有..但并没有真正明白:/在给定的代码中，我必须实现“latestActivity”函数。在我看来，它应该有效，但我不知道如何正确使用“J
scala - 为什么棱镜设置函数不返回选项/也许
在功能光学中，一个性能良好的棱镜(我相信在 scala 中称为部分透镜)应该具有 'subpart -> 'parent -> 类型的 set 函数'parent，如果棱镜“成功”并且在结构上与给定的
c - 我在分配内存时遇到问题。(也许)
有输入文件；未排序的长类型数字。(约100万)我想对输入文件中的数字进行排序。为了分配数组的内存，我使用了fseek和ftell。但出现段错误。如何修复代码？ int main( int argc,
javascript - 第三次是一个魅力......也许
我仍在尝试从单元格收集信息，使用该信息执行函数，然后将结果返回到不同的单元格。我知道这是可能的，但我正在努力解决这个问题。我在这里收到的许多提示引导我找到了以我理解的方式表达的大量信息。我希望这种事能
java - 可能的范围问题(也许)？
所以我正在制作一个小型命令行彩票游戏(代码中的注释解释了一切)，但是当我生成随机数时，我的代码并没有像我希望的那样将其缩短为三位数，除了游戏可以运行并且可以玩之外，除了偶尔有一个随机生成的数字超过一千
c++ - 空格很重要的另一种情况(也许？)
这是另一种情况，在 C++ 中空格很重要，还是编译器错误？以下代码在语法上是否正确？ #include template using EnableIf = typename std::enable
PHP 应用程序变量...也许？
我参加了一个 PHP 工作面试，我被要求实现一段代码来检测访问者是否是爬行网站并窃取内容的机器人。因此，我实现了几行代码，通过使用 session 变量存储上次访问时间戳来检测网站是否刷新/访问过快
elm - 筛选，也许， Elm
我有一个List (Maybe a)，我想过滤出Nothing的实例。我大概已经做到了，但是对所需的代码量却不满意: removeNothingFromList : List (Maybe a) ->
ontology - 如何安排一个地方的营业时间？也许 - 甚至有一个本体论吗？
有谁知道任何指定场所开放时间的本体？例如，我有一个博物馆，有 2 个季节。淡季(指定季节起止)，平日10-18:00，周六10-16(周日休息)，旺季平日10-20，周末10-18。如果没有本体，也
javascript - jQuery 函数和页面重新加载问题(也许)
我有this代码(接受的解决方案)。此代码从 js 文件中截取加载。当我在此函数处放置断点时，我看到该函数在加载页面(包含它)时被调用。初始页面加载后，当我在此页面中选择一个选项时，该 anchor
haskell - 也许 Haskell 实现
step :: [Int] -> String -> [Int] step (x:y:ys) "*" = (x*y):ys step (x:y:ys) "+" = (x + y):ys step (x
haskell - 具有不同类型短路的状态计算(也许，或者)
我正在尝试找到将以下有状态命令式代码转换为纯函数表示的最优雅的方法(最好在 Haskell 中使用其 Monad 实现提供的抽象)。然而，我还不擅长使用变压器等组合不同的单子(monad)。在我看来，
purescript - 如何将部分函数转换为安全(也许)函数？
我希望它更方便地使用库定义的partialfunc，或者使用部分模式匹配编写回调。像这样， partialMaybe :: forall a b. (Partial => a -> b) -> a
c 编译器有一个函数卡在其命名空间中(也许？)。苹果
一周前，我在代码中编写了一个名为 getline 的函数，但该函数不起作用。从那时起，每当我将函数命名为 getline 并尝试编译它时，它都不起作用。如果我将函数名称更改为其他名称，它会再次起作用。
Android:也许 FEATURE_PROGRESS 导致应用程序不幸停止
下面的代码有问题 package com.example.ch13_searchflickrr; import android.os.Bundle; import android.support.v7
Mysql 内连接(也许)以更新日期为条件
我有这个需求，并且我使用的是MySQl数据库评论表 id user id ariticle_id comment comment date ================
C++ 运行计时 IDE 也许？
是否有 IDE 或软件可以为我的 C++ 程序计时？我目前正在使用 Visual Studio 2010，所以如果有功能可以帮助解决这个问题，我将不胜感激。最佳答案您将需要使用 Profiler。
C#泛型，设计思想，也许
我是 C# 的新手，正在研究它的可能性。现在我对使用泛型的方式有点困惑...列出泛型的种类。我想在单个父类中创建一个基本的列表功能，只需命名我的子类应包含的类类型。比如说，我创建了一个类 clas

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 第三次是一个魅力......也许