无法在添加名称处读取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与substring属性匹配使用，并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处理程序并缩短标识符：

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`!
}

切勿在生产代码中执行此操作。

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