无法在添加名称处读取null的属性“值”

Question

我试图创建四个输入，并在单击按钮后显示所有输入。但是，它返回null。我的代码有什么问题？

function addname() {
  for (count = 0; count < 5; count++) {
    var x = " ";
    var inputID = "clientname" + (count + 1);
    x = document.getElementById(inputID).value
  }

  var f = "";
  for (var count = 0; count < 5; count++) {
    f += x[count];
  }

  document.write(f)
}

<input type="text" id="clientname1" />
<input type="text" id="clientname2" />
<input type="text" id="clientname3" />
<input type="text" id="clientname4" />
<button onclick="addname()"></button>

Answer 1

立即修复：有4个输入，而不是5个，并阻止x被滥用：

function addname() {
  var names = [];
  for (count = 0; count < 4; count++) {
    var inputId = " clientname" + (count + 1);
    var name    = document.getElementById( inputId ).value;
    names.push( name );
  }

  var f = "";
  for (var count = 0; count < 5; count++) {
    f += names[count];
  }

  document.getElementById( 'output' ).textContent = f; // Never use `document.write`!
}

<input type="text" id="clientname1" />
<input type="text" id="clientname2" />
<input type="text" id="clientname3" />
<input type="text" id="clientname4" />
<button onclick="addname()">Concatenate names</button>
<span id="output"></span>

修订版2：简化：将querySelectorAll与子字符串属性匹配，并使用join连接字符串：

function concatenateNames() {

    const inputs = document.querySelectorAll( 'input[type=text][id^="clientname"]' );
    const names = []; // `const` means the variable cannot be reassigned, not that it's immutable.

    for( let i = 0; i < inputs.length; i++ )
    {
        names.push( inputs[i].value );
    }

    const allNames = names.join( " " );
    document.getElementById( 'output' ).textContent = allNames;
}

修订版3：使用Array.from进行了进一步简化，因此我们可以将map与NodeListOf<T>一起使用，并添加filter以排除空值：

function concatenateNames() {

    const inputs = Array.from( document.querySelectorAll( 'input[type=text][id^="clientname"]' ) );

    const names = inputs.map( inputEl => inputEl.value ).filter( n => n.length > 0 );
    const allNames = names.join( " " );

    document.getElementById( 'output' ).textContent = allNames;
}

修订版4：进一步简化，内联中间变量仅使用一次：

function concatenateNames() {

    document.getElementById( 'output' ).textContent =
        Array.from(
            document.querySelectorAll( 'input[type=text][id^="clientname"]' )
        )
        .map( inputEl => inputEl.value )
        .filter( n => n.length > 0 )
        .join( " " );
}

修订版5：在一行中使用nextElementSibling和一个内联onclick处理程序并缩短标识符：

<input type="text" id="clientname1" />
<input type="text" id="clientname2" />
<input type="text" id="clientname3" />
<input type="text" id="clientname4" />
<button onclick="this.nextElementSibling.textContent = Array.from( document.querySelectorAll('input[type=text][id^=clientname]') ).map(i => i.value).filter(n => n.length > 0).join(' ')">Concatenate names</button>
<span id="output"></span>

永远不要在生产代码中这样做。

JSFiddle演示：https://jsfiddle.net/3md65awo/

Answer 2

在计数= 4时，Javascript停止运行，并尝试通过ID“ clientname5”获取元素

要么添加另一个文本输入，要么将循环更改为“ count = 0; count <4; count ++”

Answer 3

尝试此代码。我为此使用了jQuery。

function addname() {
      for (var count = 1; count < 5; count++) {
        var x;
        x = $("#clientname" +count).val() 
        console.log(x)

        $("#test").append(x)
      }

    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="inp" id="clientname1" />
    <input type="text" name="inp" id="clientname2" />
    <input type="text" name="inp" id="clientname3" />
    <input type="text" name="inp" id="clientname4" />
    <label id = "test"></label>
    <input type="button" onclick="addname()" value="click" />