getElementById 无法获取 html id 的值

Question

如果我选择 select 选项值 3，则显示 3 个文本框。

1.this 图片是我想要的结果。

但现在错误的结果是这样的。

（使用style_display_on()，可见/隐藏，none）但它不起作用。我错过了什么吗？

(php 数组转换为 javascript 数组，
然后来自 php 的计数数组被来自 javascript 的 getElementById 值使用...)

<?php

   $arr[0] = "10.1.35.31";
   $arr[1] = "10.1.35.122";
   $arr[2] = "10.1.35.133";

?>

<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/main.css">
<script type="text/javascript">

function getR() {
   document.getElementById("ipcnt").value = "<?php echo count($arr); ?>";
<?php
  for($i = 0; $i < count($arr); $i++) {
      echo "document.getElementById(\"" . "mmeremoteip" . $i . "\").value = \"" . $arr[$i]. "\";\n";
  }
?>
}

function mmeswitch(){

<?php
    for($i = 0; $i < 8; $i++){
        echo "document.getElementById(\"mmeremoteip". $i . "\").style.visibility = \"hidden\";\n";
        echo "document.getElementById(\"mmeremoteip". $i . "\").style.display = \"none\";\n";
    }
    for($i = 0; $i < 8; $i++){
       echo "if( document.getElementById(\"ipcnt\").value == " . ($i+1) . " ) {   \n";            
        for($j = 0; $j < $i+1; $j++) {
            echo "document.getElementById(\"mmeremoteip". $j . "\").style.visibility = \"visible\";\n";
            echo "document.getElementById(\"mmeremoteip". $j . "\").style.display = style_display_on();\n";
        }
        echo "}\n";
    }
?>

</script>
</head>
<body onLoad="getR();">
<form name="save" method="post">
<h1>TEST</h1>
<table>

<tr id="ipcnt"><td colspan="2">No. of IP</td>
<td><select name="ipcnt" size="1" onChange="mmeswitch();">
<?php
for($i = 1; $i <= 8; $i++) {
      echo "<option value='". $i ."'>". $i ."</option>\n";
}
?>
</select></td>
</tr>
<?php
for($i = 0; $i < 8; $i++) {
  echo "<tr id=\"mmeremoteip".$i."\"><td class=\"param\" colspan=\"2\">MME Remote IP" . ($i+1) . "</td>\n";
  echo "<td><input type=\"text\" name=\"mmeremoteip" . $i . "\" class=\"inputParam\" size=\"20\" maxlength=\"15\" value=\"".$arr[$i] ."\"></td></tr>\n";
}
?>
</table>
</body>
</html>

Answer 1

在这篇 fiddle 中，我发布了一个使用 vanilla js 编写的代码的工作示例。这个的js代码是：

document.body.onload = init;
let arr = [1,2,3,4,5]; // Array is from php like
/*
let arr = JSON.parse('<?php echo json_encode($arr); ?>'); // In case you don't know what is does read more about json
*/
// function called when page is loaded
function init () {
 // this creates textfields for each 'ip'
 for(let i=0;i<arr.length;i++){
  let el = document.createElement('input'); // create textfield
  el.setAttribute('type','text'); // set it to text field
  el.className = 'textField'; // set class for later use
  el.id = 'textField'+i; // set id
  el.value = arr[i]; // set value(IP)
  document.getElementById('container').appendChild(el); // add to the page
 }
document.getElementById('textFieldSelect').addEventListener('change',onSelectChange); // add action to select
 onSelectChange(); // "trigger" select when page is loaded
}

function onSelectChange(){
   var val = document.getElementById('textFieldSelect').value; // how many textfields shall there be
   // hide all textfields
   document.querySelectorAll('.textField').forEach(function(elem,idx){
     elem.style = 'display: none';
   });
   //show exactly 'val' textfields
   for(let i = 0;i<val;i++){
     document.getElementById('textField'+i).style='display:block;';
   }
}

https://jsfiddle.net/tnrrhx0d/1/

getElementById 无法获取 html id 的值

getElementById can't getting value of html id

html

javascript

php

jquery

getelementbyid