获取javascript中innerHTML为动态值的下一个子元素

Question

我在 php 代码中有一个带按钮的父元素和一个子 div。子 div 具有要动态分配的 innerHTML，并且也在输出中动态显示。

php代码：

$loc = $sdid;  /*get value according to some loop condition thus this value 
               changes as loop iterates*/        
echo '<div id="parent">
      <input type="button" id="investbutton" value="Invest" onclick="InputInvest()"> 
      <div id="child">'.$loc.'</div> 
      </div>';

现在孩子有 $loc 变量的动态值。

点击按钮后，InputInvest() 被调用：

function InputInvest()
{
   var x=0;
   x= document.getElementById("investbutton").nextSibling.innerHTML;

   document.write(x);   
}

但输出显示“未定义” 如何解决这个错误？

编辑： 上一个问题的解决方法：

x = document.getElementById("investbutton").nextElementSibling.innerHTML;

问题 2： 但是现在输出只有第一个 for 循环条件值..我认为 javascript 无法重新分配 x 因为值肯定会正确迭代...或者可能是输入标签无法动态获取值。 欢迎对此提出任何新建议！

Answer 1

尝试使用nextElementSibling

x = document.getElementById("investbutton").nextElementSibling.innerHTML;

因为换行符将被视为text node。而且它不会有一个名为innerHTML 的属性。

DEMO

---

在.php中，

<input type="button" class="investbutton" value="Invest" onclick="InputInvest(this)">

JS：

function InputInvest(_this) {
   var x = _this.nextElementSibling.innerHTML;
   document.write(x);   
}