HTML textbox.value在JavaScript函数中未更新

时间:2018-07-25 16:21:57

标签: javascript php associative-array

我有一个PHP项目,其中包含用于可视化STACK数据结构概念的文本框;如下面的屏幕截图所示:

enter image description here

我将PHP值传递给JavaScript函数,并且仅将值添加到没有值的索引号(即堆栈顶部)

下面是代码:

 <html>
 <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Data Structure Visualization</title>
    <link rel=stylesheet href=StackStyleSheet.css>
    <script type="text/javascript">
        function addElement($id, $value)
        {
            var id = $id;
            var value = $value;
            //correct id and value is passed here.

            var textbox = document.getElementById(id);

            //this LOC does not execute and returns to the php code
            textbox.value = value;
        }
    </script>

    <body>
    <?php include 'header.php'; ?>

    <form method="POST" action="">

    <div id ="container">
        <div id="top">
            <h3>STACK (ARRAY IMPLEMENTATION)</h3>
        </div> 

        <div id="bottom">
            <input id="inputBox" type="text" name="inputNumber" value="">
            <button id="pushButton"  type="submit"  class="button button1" name = "PUSH">Push</button>
            <button id="popButton"   type="submit"  class="button button2" name = "POP">Pop</button>
            <button id="clearButton" type="submit"  class="button button3" name = "CLEAR">Clear Stack</button>
        </div>

        <div id="operation">
            <input type="text" name="5E" value="" class="operation1 obutton6">
            <input type="text" name="4E" value="" class="operation1 obutton5">
            <input type="text" name="3E" value="" class="operation1 obutton4">
            <input type="text" name="2E" value="" class="operation1 obutton3">
            <input type="text" name="1E" value="" class="operation1 obutton2">
            <input type="text" name="0E" value="" class="operation1 obutton1">
        </div>

    </div>  

    </form>

    <?php
    include 'footer.php';

    if($_SERVER['REQUEST_METHOD'] == "POST" and isset($_POST['PUSH']))
    {   
        $val0E = (int)$_POST['0E'];
        $val1E = (int)$_POST['1E'];
        $val2E = (int)$_POST['2E'];
        $val3E = (int)$_POST['3E'];
        $val4E = (int)$_POST['4E'];
        $val5E = (int)$_POST['5E'];

        //creating an associative array to store/add/delete values in the index locations

        $elementsindex = array("0E"=>$val0E ,"1E"=>$val1E,"2E"=>$val2E, "3E"=>$val3E, "4E"=>$val4E, "5E"=>$val5E);

            foreach ($elementsindex as $key => $value) 
            {
                if(($elementsindex[$key])==null) 
                {
                    //value copied from textbox
                    $id = $key;
                    $value = $_POST['inputNumber'];

                    //value pushed in
                    $elementsindex[$key] = $value; //saves value against element index

                    //value reflected on screen box
                    echo '<script type="text/javascript">';
                    echo 'addElement("'.$id.'", "'.$value.'");';
                    echo '</script>';
                    break;
                }
                else if(($elementsindex[$key])!=null)
                {
                    continue;
                }
            }
        }
    }
  </body>
</html>

在foreach循环中,如果底部索引(即index = 0E)的值为null /零,则会向其添加一个新值,然后我们使用break退出循环;

但是,在JavaScript函数addElement()处,以下代码不会执行并立即返回,并且文本框中未填充任何值。

  var textbox = document.getElementById(id);

  //this LOC does not execute and returns to the php code
  textbox.value = value;

代码在哪里?

0 个答案:

没有答案