在javascript中與文本框相乘-有解無憂

我是一個初學者 javascript 程式員。我做了一個非常簡單的程式來將 2 個數字與文本框相乘。起初它奏效了。但是后來我寫了一些邏輯來避免一些錯誤。而且有些邏輯是行不通的。任何人都可以看看這段代碼并告訴我這里出了什么問題：

let text1;
let text2;
let ans;

// returning the value inside the texbox.
document.getElementById('mul').onclick=()=>{
    text1=document.getElementById('text1').value;
    text1 = Number(text1);
    text2=document.getElementById('text2').value;
    text2 = Number(text2);

    // checking if it is a number or not
    if(isNaN(text1)||isNaN(text2)){
        document.getElementById('P').innerHTML='it should be a number. Not alphabets or symbols';
    }

    // checking if it is an integer or not. 
    else if(text1.length>0 && Number.isInteger(text1)==false && text2.length>0 && Number.isInteger(text2)==false){
        document.getElementById('P').innerHTML='You cant multiply with decimal points';        
    }

    // checking if the textbox is blank or not. The reason why I checked the whether the length is greater than zero in the above logic is because this logic. whenever I did not gave any values and click the submit button it is showing 'you can multiply with decimal points', the above statement's message.
    else if(text1.length==0||text2.length==0){
        document.getElementById('P').innerHTML='you cant do any calculations with blank textbox';
}
    // else,  if it has no problem just multiply.
    else{
        let ans=BigInt(text1*text2);
        document.getElementById('P').innerHTML=ans;
        document.getElementById('zero').innerHTML='&times';
    }
}

當我在文本框中輸入整數值并單擊提交按鈕時，我得到了正確的輸出。但問題在于 else if 陳述句不起作用。當我將輸入作為浮點值提供時，它沒有做任何事情。它必須顯示訊息，但事實并非如此。當我不提供任何輸入并單擊提交按鈕時也是如此。它不顯示訊息。為什么會發生這種情況。如何解決這個問題？

此代碼的 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>calculator</title>
    <link rel="stylesheet" href="calculator.css">
</head>
<body align="center">
    <input type="text" id="text1" placeholder="enter a value"> 
    <p id="zero"></p><input type="text" placeholder="enter a value"id="text2">
    <br><br><br><p id="P"></p>
    <br><br><br><br><br><button id="mul">Multiply</button>
    <br><br><br><br><br><button id="sub">Subtract</button>
    <br><br><br><br><br><button id="div">Divide</button>
    <br><br><br><br><br><button id="add">Add</button>
    <script src="calculator.js"></script>
</body>
</html>

uj5u.com熱心網友回復：

您使用了雙等號而不是三等號。為了檢查嚴格相等。

現在它起作用了：

let text1;
let text2;
let ans;

// returning the value inside the texbox.
document.getElementById('mul').onclick = () => {
  text1 = document.getElementById('text1').value;
  text1 = Number(text1);
  text2 = document.getElementById('text2').value;
  text2 = Number(text2);

  // checking if it is a number or not
  if (isNaN(text1) || isNaN(text2)) {
    document.getElementById('P').innerText = 'it should be a number. Not alphabets or symbols';
  }

  // checking if it is an integer or not. 
  else if (!(text1.length > 0 && Number.isInteger(text1)) && !(text2.length > 0 && Number.isInteger(text2))) {
    document.getElementById('P').innerHTML = 'You cant multiply with decimal points';
  }

  // checking if the textbox is blank or not. The reason why I checked the whether the length is greater than zero in the above logic is because this logic. whenever I did not gave any values and click the submit button it is showing 'you can multiply with decimal points', the above statement's message.
  else if (text1.length === 0 || text2.length === 0) {
    document.getElementById('P').innerHTML = 'you cant do any calculations with blank textbox';
  }
  // else,  if it has no problem just multiply.
  else {
    let ans = BigInt(text1 * text2);
    document.getElementById('P').innerHTML = ans;
    document.getElementById('zero').innerHTML = '&times';
  }
}

<input type="text" id="text1" placeholder="enter a value"> 
    <p id="zero"></p><input type="text" placeholder="enter a value"id="text2">
    <br><br><br><p id="P"></p>
    <br><br><br><br><br><button id="mul">Multiply</button>
    <br><br><br><br><br><button id="sub">Subtract</button>
    <br><br><br><br><br><button id="div">Divide</button>
    <br><br><br><br><br><button id="add">Add</button>
    <script src="calculator.js"></script>

uj5u.com熱心網友回復：

這應該有效。Number中沒有length可用的屬性。因此，如果您將輸入轉換為,將不再起作用。NumberinputValue.length

let text1;
let text2;
let ans;

// returning the value inside the texbox.
document.getElementById('mul').onclick=()=>{
    text1=document.getElementById('text1').value;
    text1 = Number(text1);
    text2=document.getElementById('text2').value;
    text2 = Number(text2);

    // checking if it is a number or not
    if(isNaN(text1)||isNaN(text2)){
        document.getElementById('P').innerHTML='it should be a number. Not alphabets or symbols';
    }

    // checking if it is an integer or not. 
    else if(!Number.isInteger(text1) || !Number.isInteger(text2)){
        document.getElementById('P').innerHTML='You cant multiply with decimal points';        
    }

    // checking if the textbox is blank or not. The reason why I checked the whether the length is greater than zero in the above logic is because this logic. whenever I did not gave any values and click the submit button it is showing 'you can multiply with decimal points', the above statement's message.
    else if(!text1.length||!text2.length){
        document.getElementById('P').innerHTML='you cant do any calculations with blank textbox';
}
    // else,  if it has no problem just multiply.
    else{
        let ans=text1*text2;
        document.getElementById('P').innerHTML=ans;
        document.getElementById('zero').innerHTML='&times';
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>calculator</title>
    <link rel="stylesheet" href="calculator.css">
</head>
<body align="center">
    <input type="text" id="text1" placeholder="enter a value"> 
    <p id="zero"></p><input type="text" placeholder="enter a value"id="text2">
    <br><br><br><p id="P"></p>
    <br><br><br><br><br><button id="mul">Multiply</button>
    <br><br><br><br><br><button id="sub">Subtract</button>
    <br><br><br><br><br><button id="div">Divide</button>
    <br><br><br><br><br><button id="add">Add</button>
    <script src="calculator.js"></script>
</body>
</html>

uj5u.com熱心網友回復：

let text1, text2;

// returning the value inside the texbox.
document.getElementById('mul').onclick=()=>{
    text1=parseInt(document.getElementById('text1').value)
    text2=parseInt(document.getElementById('text2').value)

    // checking if the textbox is blank or not. The reason why I checked the whether the length is greater than zero in the above logic is because this logic. whenever I did not gave any values and click the submit button it is showing 'you can multiply with decimal points', the above statement's message.
    if(text1.length==0){
        document.getElementById('P').innerHTML='you cant do any calculations with blank textbox';
    }

    // else,  if it has no problem just multiply.
    else{
        document.getElementById('P').innerHTML=text1*text2;
        document.getElementById('zero').innerHTML='&times';
    }
}

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>calculator</title>
    <link rel="stylesheet" href="calculator.css">
</head>
<body style="text-align: center;">
    <input type="number" min="0" id="text1" placeholder="enter a value"> 
    <p id="zero"></p><input type="number" min="0" placeholder="enter a value" id="text2">
    <br><br><br><p id="P"></p>
    <br><br><br><br><br><button id="mul">Multiply</button>
    <br><br><br><br><br><button id="sub">Subtract</button>
    <br><br><br><br><br><button id="div">Divide</button>
    <br><br><br><br><br><button id="add">Add</button>
    <script src="calculator.js"></script>
</html>

解釋代碼：

首先，我將所有輸入型別重寫為數字，所以現在用戶不能寫除數字之外的任何符號，并且isNaN由于我之前所說的原因，我被洗掉了檢查。此外，我只使用了 text1 和 text2 變數并洗掉了ans變數，因為計算是在將計算的數字寫入 innerHTML 之前進行的。加號自動決議為整數，所以我洗掉了整數檢查。

uj5u.com熱心網友回復：

這是您的應用程式 100% 運行。

您的代碼無法正常作業的原因是length數字型別沒有屬性。length僅在陣列和字串上。

您的代碼存在一些問題：

text1并且text2不應該是let全域范圍頂部的變數。它們應該是指向各自 DOM 節點的指標，.value可以隨時使用。
而不是使用Element.onclick，而是使用Element.addEventListener('click', callback)。
避免使用innerHTML. 是使用textContent或innerText（textContent最好）的最佳實踐。
您可以將輸入元素設定type為number，這將阻止用戶甚至輸入非數字值。
當您有大量else if陳述句時，最好在語法上使用一個switch案例（有些人可能會反對這一點，但在我看來它更容易閱讀）。
我很少看到<br>在現代 Web 應用程式中使用該標簽。謹慎使用它，并選擇flex或grid替代您的物品。
不要使用==運算子，而是使用“嚴格等于”運算子：===
如果您正在檢查條件是否為假，則不必執行if (conditon === false). 您可以使用運算子否定條件!：if (!condition)。''如果條件回傳一個虛假值，例如, 0, undefined, null, 或, 這也會觸發NaN。

最重要的是，嘗試將您的邏輯分成“樂高積木”。基本上，制作做一件事的小功能。除錯大型功能并不好玩。我們通過創建validate函式在下面的示例中實作了這個功能邏輯。

const textbox1 = document.querySelector('#text1');
const textbox2 = document.querySelector('#text2');
const pTag = document.querySelector('#P');

const actions = {
    mul: 'mul',
    sub: 'sub',
    div: 'div',
    add: 'add',
};

const validate = (num1, num2) => {
    if (isNaN(num1) || isNaN(num2) || !Number.isInteger(num1   num2)) return false;
    return true;
};

const handleClick = ({ target }) => {
    let answer;
    
    const val1 =  textbox1.value;
    const val2 =  textbox2.value;

    if (!validate(val1, val2)) {
        pTag.textContent = 'Invalid input! Much provide two integers.';
        return;
    }

    switch (target.getAttribute('id')) {
        case actions.add:
            answer = val1   val2;
            break;
        case actions.sub:
            answer = val1 - val2;
            break;
        case actions.div:
            answer = val1 / val2;
            break;
        case actions.mul:
            answer = val1 * val2;
    }

    pTag.textContent = answer;
};

window.addEventListener('DOMContentLoaded', () => {
    for (const action of Object.values(actions)) {
        const elem = document.querySelector(`#${action}`);
        elem.addEventListener('click', handleClick);
    }
});

<body>
    <input type="number" id="text1" placeholder="enter a value" />
    <p id="zero"></p>
    <input type="number" placeholder="enter a value" id="text2" />
    <p id="P" style="color: red"></p>
    <div style="display: flex; flex-direction: column; gap: 20px; max-width: 200px">
        <button id="mul">Multiply</button>
        <button id="sub">Subtract</button>
        <button id="div">Divide</button>
        <button id="add">Add</button>
    </div>
</body>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/460028.html

標籤：javascript

上一篇：從具有子ID的平面陣列創建層次結構

下一篇：運行console.log("Helloworld")時VSCode回傳退出代碼1時出錯；在javascript中