JavaScript如何获取两个while循环输出结果中的公共元素

问题原因 #

• 你编写的compareArrays函数里，document.getElementById("result1")拿到的是DOM元素对象，不是元素内的文本内容，直接调用split方法会抛出类型错误。
• 两个while循环输出的字符串末尾会多拼接一个逗号，用逗号分割后数组最后会出现空字符串，干扰公共元素匹配结果。
• 没有做类型转换，分割后得到的是字符串数组，若后续涉及数值运算会出现逻辑问题。

优化修改方案 #

建议直接在while循环执行时就把数值存入数组，不需要后续再从DOM读取内容解析，效率更高也更不容易出错。

1. 先修改HTML部分，新增公共结果展示区域 #

Maximum Range:<input type="number" id="maximum"> <br><br>

number 1: <input type="number" id="number1"> <br>
increment 1: <input type="number" id="increment1">

<br><br>

<h3>Compare it with:</h3>

number 2: <input type="number" id="number2"> <br>
increment 2: <input type="number" id="increment2">

<br><br>

<button onclick="calculate();">Calculate</button> <hr>

<strong>Results:</strong>
<p id="result1"></p>
<p id="result2"></p>
<!-- 新增公共结果展示 -->
<strong>公共元素：</strong>
<p id="compareResults"></p>

2. 修改JS逻辑 #

function calculate() {
    document.getElementById("result1").innerHTML = "";
    document.getElementById("result2").innerHTML = "";
    document.getElementById("compareResults").innerHTML = "";
    // 提前转数字，不用每次循环都parseInt
    let n1 = parseInt(document.getElementById("number1").value);
    let i1 = parseInt(document.getElementById("increment1").value);
    let n2 = parseInt(document.getElementById("number2").value);
    let i2 = parseInt(document.getElementById("increment2").value);
    let max = parseInt(document.getElementById("maximum").value);

    // 定义两个数组存循环生成的数值
    let arr1 = [], arr2 = [];

    while (n1 <= max) {
        arr1.push(n1);
        document.getElementById("result1").innerHTML += n1 + ",";
        n1 += i1;
    }

    while(n2 <= max){
        arr2.push(n2);
        document.getElementById("result2").innerHTML += n2 + ",";
        n2 += i2;
    }

    // 直接计算公共元素
    let common = arr1.filter(item => arr2.includes(item));
    document.getElementById("compareResults").innerHTML = common.join(",");
}

如果要保留你原来的commonElementsOfArray和compareArrays逻辑，只需要修改compareArrays如下即可：

function compareArrays() {
    // 取innerHTML获取文本内容，同时去掉末尾的逗号
    let string1 = document.getElementById("result1").innerHTML.replace(/,$/, '');
    let string2 = document.getElementById("result2").innerHTML.replace(/,$/, '');
    // 转成数字数组
    let string1Arr = string1.split(",").map(Number);
    let string2Arr = string2.split(",").map(Number);
    let commonString = commonElementsOfArray(string1Arr, string2Arr);
    document.getElementById("compareResults").innerHTML = commonString.join(",");
}

内容的提问来源于stack exchange，提问作者helpthenoob