使用复选框s1和s2以及不同功能的交互式堆栈

时间:2017-12-05 19:02:27

标签: javascript html checkbox

我正在尝试制作Stack的工作模型,用户可以在其中选择堆栈s1或s2,并可以执行push和pop等操作。



<html>
    <head>
        <title>Stack With Constructor </title>
    </head>
    <body>
        
        <div>
            
            
            <p id="p1">
                stack
            </p>
            <input type="checkbox" id="stack1" value="s1">s1
            <br>
            <input type="checkbox" id="stack2" value="s2">s2
            <br>
            <textarea id="tdisplay"></textarea>
            <textarea id="tpush"></textarea>
            <button onclick="doJob()">push</button>
            
            <button onclick="doJob1()">pop</button>
            <textarea id="tpop"></textarea>
        </div>
        
        <script>
             function myfunction() {
        if (document.getElementById("stack1").checked == true) {
            console.log('myFunction called!');
            s1 = new MyStack();
        }
        if (document.getElementById("stack2").checked == true) {
            s2 = new MyStack();
        }
    }
            function push(v) {
                if (this.st === 0) {
                    console.log("Stack Overflow");
                } else {
                    this.st = this.st - 1;
                    this.stk[this.st] = v;
                    document.getElementById("tdisplay").value=this.print();
                }
            }

            function pop() {
                if (this.st === 10) {
                    console.log("Stack Underflow");
                } else {
                    var temp = this.stk[this.st];
                    this.st = this.st + 1;
                    document.getElementById("tdisplay").value=this.print();  
                    return temp;
                }
            }

            function print() {
                console.log("Printing Stack");
                var str = "";//empty string
                for (var i = this.st ; i < 10; i++) {
                    console.log(this.stk[i]);
                    str+=this.stk[i]+'\n';//concatenate the value and a new line
                }
                return str;
            };

            function MyStack() {
                this.st = 10;
                this.stk = new Array(10);
                this.push = push;
                this.pop = pop;
                this.print = print;
            };

            var s1 = new MyStack();

            function doJob() {
                var x=document.getElementById("tpush").value;
                s1.push(x);
                
                document.getElementById("tpush").value="";
            }
            function doJob1(){
                var y=s1.pop();

                document.getElementById("tpop").value=y;
                              
            }
        </script>
    </body>
&#13;
&#13;
&#13;

我不知道如何使用复选框方法。这意味着当我选择s1复选框时,它应该创建s1堆栈,我可以对它进行操作,与s2相同。

结果应该是交互式堆栈的正确浏览器功能,因此它可以像以下步骤一样工作:

用户选择s1或s2堆栈 如果他/她选择s1,那么他们可以为s1的所有操作工作。 用户也可以在s2之间切换,并且可以执行所有操作。 我在复选框上工作时遇到问题。

1 个答案:

答案 0 :(得分:0)

我认为您可以通过单选按钮获得更多运气。如果s1和s2是一个单选按钮组,就像 <input type="radio" name="stack_select" id="stack1" value="s1">s1 <br> <input type="radio" name="stack_select" id="stack2" value="s2">s2

然后,您可以在一个函数中更改时监听,并让其他ui组件更新正确的选定堆栈。

您的案例复选框的问题在于它们不是互斥的,并且您似乎永远不希望同时选择s1和s2。