我的代码有问题，希望您能帮助我。

我有一个表格，您必须在其中选择磁盘的最大大小和亲属磁盘的编号。每个磁盘号的总和不能大于相对磁盘的大小。（请看图片）

总和亲戚父母的问题

我尝试了很多事情，但是表单（类，查询等）出现了问题。

function check_number23() {
  let ProjectName = document.getElementById("resultsprojectname").innerHTML;

  var sizediskN1 = document.getElementsByClassname("sizediskN1");


  var value = Object.keys(sizediskN1).length;

  var disksizeN = document.getElementsByClassname("disksizeN");
  var disksizeNkey = Object.keys(disksizeN).length;



  for (var h = 0; h < value; h++) {
    var storagevalue = +sizediskN1[h].value;
  }
  alert(storagevalue);



  for (var j = 0; j < disksizeNkey; j++) {
    var storagemax = document.getElementsByClassname("disksizeN")[j].value;

    if (storagevalue - storagemax <= 0) {
      result = storagevalue + " GiB of Standard Partitions can be used.";
      document.getElementsByClassname("negativenumberchecker23")[h].innerHTML = result;
    } else {
      result = storagevalue + " GiB of Standard Partitions can't be used. Insert a new value.";
      alert(result);
      sizediskN1[h].value = '0';
    }
  }
}

<label>Disk Size (GiB)</label> <input class="form-control disksizeO" type='number' min="1" onchange="check_numberDSKSizeO(this)" name='disksizeO[]' oninput="validity.valid||(value='0');" value='0' />
<label>Size (GiB):</label>
<input type='number' min="0" oninput="validity.valid||(value='0' onchange=" check_number23(this) " name='sizediskN1[]'  class='sizediskN1 form-control'>

我希望我的问题很清楚...请帮助。

下面是一个片段，它检查两个磁盘中的值，并将它们与可用磁盘总空间进行比较。

请注意，必须对其进行修改以与任何数量的大小输入和任何数量的磁盘一起使用。

const inpDiskSize = document.getElementById('disk-size')
const inpSize1 = document.getElementById('size1')
const inpSize2 = document.getElementById('size2')
let checkDisplay = true

// checking values and returning TRUE/FALSE
const checkValues = (dSize,sizeArr) => {
  return dSize >= sizeArr.reduce((a,c) => a + c,0)
}

// transforming data from UI to the checking function
const changeEvent = (inpDiskSize,inpSizeArr) => {
  return checkValues(inpDiskSize.value,inpSizeArr.map(e => Number(e.value) || 0))
}

// displaying text
const displayText = (d) => {
  let r = ''
  if (d) {
    r = "You can have these partitions."
  } else {
    r = "You can NOT have these partitions."
  }
  document.getElementById('checkDisplay').textContent = r
}

// change event listener registrations
inpDiskSize.addEventListener('change',function(e) {
  displayText(changeEvent(inpDiskSize,[inpSize1,inpSize2]))
})
inpSize1.addEventListener('change',inpSize2]))
})
inpSize2.addEventListener('change',inpSize2]))
})

<label>Disk Size (GiB)</label>
<input id="disk-size" class="form-control disksizeO" type='number' min="1" name='disksizeO[]' oninput="validity.valid||(value='0');" value='0' />
<br />
<label>Size1 (GiB):</label>
<input id="size1" type='number' min="0" oninput="validity.valid||(value='0')" name='sizediskN1[]' class='sizediskN1 form-control' />
<br />
<label>Size2 (GiB):</label>
<input id="size2" type='number' min="0" oninput="validity.valid||(value='0')" name='sizediskN1[]' class='sizediskN1 form-control' />
<br />
<br />
<div id="checkDisplay"></div>

编辑

我建议应该/可以不同地解决这个问题。

以下是代码段：

const msgArr = [
  'You can NOT have this configiration','You can have this configiration'
]

// array of disk objects
const disks = [{
  diskId: 0,maxSize: 5,rels: [{
    size: 1
  },{
    size: 2
  }],msg: 'You can have this configiration'
},{
  diskId: 1,maxSize: 3,rels: [{
    size: 3
  },{
    size: 4
  }],msg: 'You can NOT have this configiration'
}]

// displaying the disks (creating an HTML template and
// appending it to the DOM)
function render(disks) {
  let html = ''
  disks.forEach(disk => {
    html += `<h4>DISK ${disk.diskId}</h4>`
    html += `<label for="disk-${disk.diskId}">disk-${disk.diskId}<input id="disk-${disk.diskId}" class="size-input" data-diskId="${disk.diskId}" type="number" value="${disk.maxSize}"/></label><br />`
    disk.rels.forEach((rel,i) => {
      const relId = `disk-${disk.diskId}-rel-${i}`
      html += `<label for="${relId}">${relId}<input id="${relId}" class="disk-rel size-input" data-diskId="${disk.diskId}" data-relId="${i}" type="number" value="${rel.size}"/></label><br />`
    })
    html += '<br />'
    html += `<div class="message">${disk.msg}</div>`
    html += '<br />'
  })
  document.getElementById('disksContainer').innerHTML = html
  addEventListenersToInputs('.size-input')
}

// rendering the disks first time
render(disks)

// adding event listeners to input fields
function addEventListenersToInputs(selector) {
  const inputs = document.querySelectorAll(selector)
  inputs.forEach(e => {
    e.addEventListener('change',function(e) {
      const diskId = this.getAttribute('data-diskId')
      updateValues(diskId,disks)
      render(disks)
    })
  })
}

// checking a single disk
function checkValue(disk) {
  return disk.rels.reduce((a,c) => a + Number(c.size),0) <= disk.maxSize
}

// mutate the disks object
function updateValues(diskId,disks) {
  const els = document.querySelectorAll(`[data-diskId="${diskId}"]`)
  const disk = disks.find(e => {
    return Number(e.diskId) === Number(diskId)
  })

  els.forEach(el => {
    if (el.getAttribute('id') === `disk-${disk.diskId}`) {
      disk.maxSize = el.value
    } else {
      disk.rels[Number(el.getAttribute('data-relId'))].size = el.value
    }
  })
  disk.msg = msgArr[Number(checkValue(disk))]
}

<div id="disksContainer"></div>

与先前解决方案的主要区别在于，磁盘是在DOM中进行注释设置的，但是它们被“保留”在对象的JavaScript数组中。显示的HTML是附加在DOM上的JS“模板”-您可以更轻松地进行更改（不过JS并未与DOM完全脱钩）。

此解决方案适用于包含任意数量的相关分区的任意数量的磁盘。

代码可能比第一种解决方案长一点，并且看起来更复杂，但这是因为HTML放在JS中，并且它必须能够处理多个磁盘。

编辑2

然后有一个完全不同的东西：一个现代的JS框架。

VueJS

Vue.component('disk',{
  props: ['disk'],data() {
    return {
      valid: 1,msg: [
        'You can NOT have this configuration.','You can have this configuration.'
      ]
    }
  },template: `
    <div>
      <button @click="$emit('remove-disk',disk.id)">REMOVE DISK</button><br />
      <input type="number" :value="disk.maxSize" @change="setValue($event.target.value,0)"/><button @click="addRel()">Add rel</button><br />
      <div :key="rel.id" v-for="rel in disk.rels">
        <input type="number" :value="rel.size" @change="setValue($event.target.value,rel.id)"/><button @click="removeRel(disk.id,rel.id)">REMOVE THIS REL</button>
      </div><br />
      {{msg[valid]}}
    </div>`,methods: {
    setValue(val,relId) {
      const emitVal = {
        val: val,diskId: this.disk.id,relId: relId
      }
      this.$emit('set-value',emitVal)
      this.valid = this.checkValues()
    },checkValues() {
      return Number(this.disk.rels.reduce((a,c) => {
        return a + Number(c.size)
      },0) <= this.disk.maxSize)
    },addRel() {
      this.$emit('add-rel',this.disk.id)
    },removeRel(diskId,relId) {
      this.$emit('remove-rel',{
        diskId,relId
      })
      this.valid = this.checkValues()
    }
  }
})


new Vue({
  el: "#app",data: {
    disks: []
  },methods: {
    addDisk() {
      const newDisk = {
        id: Date.now(),maxSize: 0,rels: []
      }
      this.disks.push(newDisk)
    },addRel(id) {
      this.disks.find(e => e.id === id)
        .rels.push({
          id: Date.now(),size: 0
        })
    },removeDisk(id) {
      this.disks = this.disks.filter(e => e.id !== id)
    },removeRel({
      diskId,relId
    }) {
      const disk = this.disks.find(e => e.id === diskId)
      disk.rels = disk.rels.filter(e => e.id !== relId)
    },setValue({
      val,diskId,relId
    }) {
      const disk = this.disks.find(e => e.id === diskId)
      if (relId === 0) {
        disk.maxSize = val
      } else {
        const rel = disk.rels.find(e => e.id === relId)
        rel.size = val
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <button @click="addDisk">ADD DISK</button>
  <div v-for="disk in disks">
    <disk :key="disk.id" :disk="disk" @add-rel="addRel($event)" @set-value="setValue($event)" @remove-disk="removeDisk($event)" @remove-rel="removeRel($event)" />
  </div>
</div>

这是完全动态的~~（好，没有删除项）~~：处理具有任意数量的分区的任意数量的磁盘。

编辑3

我添加了删除磁盘和删除rel 功能-如下面的评论所要求。

总和亲戚父母的问题

leijian_113 回答：总和亲戚父母的问题

编辑

编辑2

VueJS

编辑3

大家都在问