getElementByIdがhtml idの値を取得できません

選択オプション値3を選択した場合、3テキストボックスを表示します。getElementByIdがhtml idの値を取得できません

1.この写真は私が欲しいものの結果です。

このような結果が間違っています。

（使用style_display_on（）、可視/隠し、なし）しかし、それはうまくいきません。何か不足していますか？このフィドルで

（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>

出典

2017-03-14 kara

あなたがレンダリングされたバージョンを提供できます - すべてのPHP難読化せずにすなわち？余分なスペースがあるかもしれないように見えますが、わかりません。 –

js関数内にPHPコードを挿入しました –

申し訳ありません!!私はphp配列のコードを入力..！ – kara

私はあなたの作業例を掲載バニラ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/

出典

2017-03-14 10:39:47 Berrigan

getElementByIdがhtml idの値を取得できません

答えて

関連する問題