Question

关于同一件事，我对这篇文章有几个不同的问题。

（此代码允许您插入分数并找到它们的平均值）

1.当数量不明时，我怎么能这样做？为了实现三个数字，我会做((eng1n + eng2n + eng3n) / (eng1d + eng2d + eng3d)) * 100（以n结尾的变量是分数的分子，而以d结尾的变量是分母），但是如何用未知数量的数字来做这个？

2.我将从6个输入开始网页（3个分数，因为我有一个分子输入和一个分母输入）但是如何创建一个创建另一组输入的按钮？

这通常很容易，但我怎么做才能让每个人都拥有自己独特的身份？ id将遵循一个模式（engNUMBERn，engNUMBERd，并且每个集合的数字比最后一个集合高一个），这可能使这成为可能。然而，将它们纳入上述等式中也是一个挑战，而不知道它们的数量。

3.我的上一个问题不应该太难，假设我们有两个分数，所以等式为((eng1n + eng2n) / (eng1d + eng2d)) * 100。如何才能使得如果仅填充分数的分子或分母，则从分子中除去分子和分母？谢谢！

代码：

<!DOCTYPE html>

<link rel="stylesheet" href="style.css">

<div id='english' class='class'>English 1</div>
  <div id='engBookTests' class='type'>Book Tests</div>
  <div>
<div><input id='eng1n' type='number' placeholder='##' onkeyup='update()' onchange='update()' class='input'>/<input id='eng1d' type='number' placeholder='##' onkeyup='update()' onchange='update()' class='input'></div>
<div><input id='eng2n' type='number' placeholder='##' onkeyup='update()' onchange='update()' class='input'>/<input id='eng2d' type='number' placeholder='##' onkeyup='update()' onchange='update()' class='input'></div>
<div><input id='eng3n' type='number' placeholder='##' onkeyup='update()' onchange='update()' class='input'>/<input id='eng3d' type='number' placeholder='##' onkeyup='update()' onchange='update()' class='input'></div>
</div>

<script>
function update() {
  var eng1n = document.getElementById('eng1n').value;
  var eng1d = document.getElementById('eng1d').value;
  var eng2n = document.getElementById('eng2n').value;
  var eng2d = document.getElementById('eng2d').value;
  var eng3n = document.getElementById('eng3n').value;
  var eng3d = document.getElementById('eng3d').value;
  if (eng1n != "" && eng1d != "") {
    var engBTA = ((eng1n + eng2n + eng3n) / (eng1d + eng2d + eng3d)) * 100
    document.getElementById('engBookTests').innerHTML = "Book Tests (" + engBTA + "%)"
  }
}
</script>

CSS：

.class {
  font-weight: bold;
}

.type {
}

.input {
  left: 0;
  width: 14px;
  border: 0;
  direction: ltr;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

Answer 1

这是您寻找的代码。我重新编写了您的功能，并添加了一个添加新分数。

这就是我改变了：

我创建了一个插入fraction元素的按钮，以便添加as 你想要的就好。
删除了input ID，并为不同的值提供了类别
重新制作update()功能，以便它可以根据需要使用尽可能多的输入。

希望这就是你要找的东西。如果需要，很乐意解释或帮助提供更好的解决方案。

＆＃13;

function update() {
var nums =  document.getElementsByClassName('num');
var dens =  document.getElementsByClassName('den');

 var sumN = 0;
   for (var i = 0; i< nums.length; i++){
    sumN += +nums[i].value;
   }
    var sumD = 0;
   for (var i = 0; i< dens.length; i++){
    sumD += +dens[i].value;
   }
   
  var engBTA = ( sumN/sumD) * 100;
  document.getElementById('engBookTests').innerHTML = "Book Tests (" + engBTA + "%)";


}


function newFrac() {
var elem = "<input type='number' placeholder='##' onkeyup='update()' onchange='update()' class='input num'>/<input type='number' placeholder='##' onkeyup='update()' onchange='update()' class='input den'>"
var temp = document.createElement('div');
temp.innerHTML = elem;
  document.getElementById('fractions').appendChild(temp);
  
}

＆＃13;

.class {
  font-weight: bold;
}

.type {}

.input {
  left: 0;
  width: 14px;
  border: 0;
  direction: ltr;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

＆＃13;

<!DOCTYPE html>

<link rel="stylesheet" href="style.css">

<div id='english' class='class'>English 1</div>
<div id='engBookTests' class='type'>Book Tests</div>
<div id="fractions">

  <div>
    <input type='number' placeholder='##' onkeyup='update()' onchange='update()' class='input num'>/
    <input type='number' placeholder='##' onkeyup='update()' onchange='update()' class='input den'>
  </div>

</div>
<button onclick='newFrac()'>New</button>

＆＃13;

Answer 2

1）带有for循环的数组，或仅Array.reduce

2）您有一个父div，点击该按钮，您将使用document.createElement创建一个元素，然后将其附加到Element.appendChild。您可以创建一个删除最近一个的减法按钮，或者您可以将每个集合放入一个包装器中，并在第一个屏幕上添加一个按钮以删除每个包装中的包装，如here所示。您可以使用document.createElement为每个人创建一个新ID，但这看起来很麻烦，所以我建议您阅读div。我通过使用Array.from(document.querySelector(".wrapper > input"))在那个游戏（我链接）中做了这个（因为我只有一个输入，对你来说可能有点复杂）并循环遍历该数组以获取值。

编辑：看看评论，Slava Knyazev指出你可以简单地为每个输入添加一个类，虽然这是我的暗示，但我并没有讲清楚。这肯定是更容易的方法，即使创建减法按钮可能有点困难

3）如果<input>.value为空 - 字符串（或0，因为您正在使用type="number"），则在您用于读取它的任何函数中跳过它

祝你好运！

Answer 3

这是您寻求的功能：

＆＃13;

    // Blog Schema

      var mainBlogSchema = new mongoose.Schema({
      image: String,
      imageDescription: String,
      priority: {
         type: String,
         default: ""
      },
      title: String,
      content: String,
      author: {
         id: {
         type: mongoose.Schema.Types.ObjectId,
         ref: 'User',
       },
         username: String,
         name: String,
      },
      slug: {
         type: String,
         unique: true,
      },
      status: String,
      viewCount: {
         type: Number,
         default: 0,
      },
      category: String,
      categorySlug: String,
      tags: String,
      updated: {
         type: Boolean,
         default: false
      },
      date: { type: Date, default: Date.now },
      comments: [
        {
          type: mongoose.Schema.Types.ObjectId,
          ref: 'Comment',
        },
       ],
     },{
     timestamps: {
       createdAt: 'createdAt',
       updatedAt: 'updatedAt'
      }
     });

＆＃13;

查找未知数量的平均值

3 个答案: