仅在设置值两次

时间:2018-06-21 18:00:07

标签: html typescript

我试图根据是否选中复选框来更改HTML输入的值。如果我仅重置一个输入,则完全可以正常工作,但是如果尝试同时重置两个输入,则会收到错误

Cannot invoke an expression whose type lacks a call signature. Type 'String' has no compatible call signatures.

我的代码如下

 if((<HTMLInputElement>unavailableInputs[i]).checked){
                (<HTMLInputElement>qtyShippedInputs[i]).value = ""

                (<HTMLInputElement>trackingNumberInputs[i]).value = ""
            }

如果我仅重置其中一个值,则不管哪个值,它都不会引发错误并且可以正常工作。一旦我同时执行qtyShipped和trackingNumber,就会收到错误。另外,在浏览器中我收到错误

"" is not a function

我非常感谢您的帮助。

这里要求的是完整的代码,可以解决该问题

disableFulfillment(shipment) {
        const unavailableInputs = document.getElementsByClassName('unavailable-qty')
        const qtyShippedInputs = document.getElementsByClassName('qty-shipped')
        const requestedQtyFields = document.getElementsByClassName('requested-qty')
        const trackingNumberInputs = document.getElementsByClassName('tracking-number')
        const reasonCodeInputs = document.getElementsByClassName('reason-codes')
        const reasonCodeValues = []
        const lines = []
        const lineCompleted = []
        let i
        for (i = 0; i < trackingNumberInputs.length; i++) {
            if ((<HTMLInputElement>unavailableInputs[i]).checked) {
                (<HTMLInputElement>qtyShippedInputs[i]).value = ''
            }
            if ((<HTMLInputElement>unavailableInputs[i]).checked) {
                (<HTMLInputElement>trackingNumberInputs[i]).value = ''
            }

            if (!(<HTMLInputElement>unavailableInputs[i]).checked) {
                if ((<HTMLInputElement>unavailableInputs[i]).nextElementSibling) {
                    (<HTMLInputElement>unavailableInputs[i].nextElementSibling.firstChild).value = ''
                    reasonCodeValues[i] = (<HTMLInputElement>reasonCodeInputs[i]).value
                } else {
                    reasonCodeValues[i] = 0
                }
            } else {
                if ((<HTMLInputElement>unavailableInputs[i]).nextElementSibling.firstElementChild) {
                    reasonCodeValues[i] = (<HTMLInputElement>unavailableInputs[i].nextElementSibling.firstElementChild).value
                } else {
                    reasonCodeValues[i] = 0
                }
            }
         
            const inputs = {
                unavailable: (<HTMLInputElement>unavailableInputs[i]).checked,
                qtyShipped: (<HTMLInputElement>qtyShippedInputs[i]).value,
                requestedQty: (<HTMLInputElement>requestedQtyFields[i]).innerText,
                reasonCodeInputs: reasonCodeValues[i],
                trackingNumber: (<HTMLInputElement>trackingNumberInputs[i]).value
            }
            lines.push(inputs)
        }

        lines.forEach(line => {
            if (line.unavailable === true && (line.reasonCodeInputs === 'CUSTOMERCANCEL' || line.reasonCodeInputs === 'UNAVAILABLE')) {
                lineCompleted.push(true)
            } else if (line.qtyShipped === line.requestedQty && line.trackingNumber.length >= 9) {
                lineCompleted.push(true)
            } else {
                lineCompleted.push(false)
            }
        })

        return !lineCompleted.every(function(e) {
            return e === true
        })
    }

您将看到唯一的变化是将它分为两​​个相同的if语句。哪个没问题。

这是相同的代码,两个setter放在相同的if语句中,该语句会中断。

disableFulfillment(shipment) {
        const unavailableInputs = document.getElementsByClassName('unavailable-qty')
        const qtyShippedInputs = document.getElementsByClassName('qty-shipped')
        const requestedQtyFields = document.getElementsByClassName('requested-qty')
        const trackingNumberInputs = document.getElementsByClassName('tracking-number')
        const reasonCodeInputs = document.getElementsByClassName('reason-codes')
        const reasonCodeValues = []
        const lines = []
        const lineCompleted = []
        let i
        for (i = 0; i < trackingNumberInputs.length; i++) {
            if ((<HTMLInputElement>unavailableInputs[i]).checked) {
                (<HTMLInputElement>qtyShippedInputs[i]).value = ''
                (<HTMLInputElement>trackingNumberInputs[i]).value = ''
            }
                


            if (!(<HTMLInputElement>unavailableInputs[i]).checked) {
                if ((<HTMLInputElement>unavailableInputs[i]).nextElementSibling) {
                    (<HTMLInputElement>unavailableInputs[i].nextElementSibling.firstChild).value = ''
                    reasonCodeValues[i] = (<HTMLInputElement>reasonCodeInputs[i]).value
                } else {
                    reasonCodeValues[i] = 0
                }
            } else {
                if ((<HTMLInputElement>unavailableInputs[i]).nextElementSibling.firstElementChild) {
                    reasonCodeValues[i] = (<HTMLInputElement>unavailableInputs[i].nextElementSibling.firstElementChild).value
                } else {
                    reasonCodeValues[i] = 0
                }
            }
         
            const inputs = {
                unavailable: (<HTMLInputElement>unavailableInputs[i]).checked,
                qtyShipped: (<HTMLInputElement>qtyShippedInputs[i]).value,
                requestedQty: (<HTMLInputElement>requestedQtyFields[i]).innerText,
                reasonCodeInputs: reasonCodeValues[i],
                trackingNumber: (<HTMLInputElement>trackingNumberInputs[i]).value
            }
            lines.push(inputs)
        }

        lines.forEach(line => {
            if (line.unavailable === true && (line.reasonCodeInputs === 'CUSTOMERCANCEL' || line.reasonCodeInputs === 'UNAVAILABLE')) {
                lineCompleted.push(true)
            } else if (line.qtyShipped === line.requestedQty && line.trackingNumber.length >= 9) {
                lineCompleted.push(true)
            } else {
                lineCompleted.push(false)
            }
        })

        return !lineCompleted.every(function(e) {
            return e === true
        })
    }

0 个答案:

没有答案