單擊按鈕后如何顯示新的按鈕？

Question

這是我的問題。 我想創建一個問卷。

你好嗎？ A）“好”按鈕B）“壞”按鈕

即用戶單擊按鈕B。）

顯示警報窗口，並通知用戶有關他/她的最后選擇。 新問題和按鈕出現在同一頁面上。 本質上，用戶將在同一頁面上瀏覽一系列問題。

你為什么不好？ A）“ Some Txt”按鈕B。）“ Some Txt”按鈕

如何在同一頁面上顯示新問題和新按鈕。 該概念應遵循某種決策樹邏輯。

解決方案，建議或“哪里檢查提示”表示贊賞。 請幫我！

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>Hello</title>

<script type="text/javascript">
    function buttonclickgood() {
        alert('you have clicked Good');
    }
</script>
<script type="text/javascript">
    function buttonclickbad() {
        alert('you have clicked Bad');
    }
</script>

</head>
<p>How are you?</p>
<input type="button" value="Good!" onclick="buttonclickgood()"/> 
<input type="button" value="Bad!" onclick="buttonclickbad()"/> 

<body>
</body>
</html>

Answer 1

您可能需要探索一下JQuery。

特別是有關.click（）API https://api.jquery.com/click/的內容

您打算只在客戶端執行此操作嗎？ 我建議您通過客戶端/服務器模型來執行此操作，例如Angular（Client）-> NodeJS（Server）

也就是說，在節點中具有問題生成邏輯並讓客戶端使用問題，但是並非不可能在客戶端上做所有事情。

所以你的代碼將類似於

<script src="../script/jquery-2.1.4.js"></script>
<script>
    $(document).ready(function() {
    <!-- maybe let say define your data (questions) here -->
    var data = 
      [ 
          {
             <!--example ... --> 
          }
      ] 
    $("#btn_1").click(function() {
          <!-- do some logic with the data above. Process it then print the new question by update your text -->
          $('#TxtArea').val(data); 
    });

</script>

Answer 2

您將需要使用一些JavaScript來隱藏/顯示您的不同步驟。 例如，使用JQuery，您可以執行以下操作：

    <script type="text/javascript">
        $(document).ready(function() {
            $(".step").hide();
            $(".step-1").show();
        });

        function buttonclick(nextStep)
        {
            $(".step").hide();
            $(".step-"+nextStep).show();
        }
    </script> 

    <div class="step step-1">
        <p> Question 1 </p>
        <input type="button" class="button" value="Good!" onclick="buttonclick(2)"/> 
        <input type="button" class="button" value="Bad!" onclick="buttonclick(2)"/> 
    </div>
    <div class="step step-2">
        <p> Question 2 </p>
        <input type="button" class="button" value="Good!" onclick="buttonclick(3)"/> 
        <input type="button" class="button" value="Bad!" onclick="buttonclick(3)"/> 
    </div>
    <div class="step step-3">
        <p> Question 3 </p>
        <input type="button" class="button" value="Good!" onclick="buttonclick(1)"/> 
        <input type="button" class="button" value="Bad!" onclick="buttonclick(1)"/> 
    </div>

不要忘記添加JQuery庫以使其工作。 該功能也可以由JQuery中的.click代替。

我希望這將有所幫助。

Answer 3

為您工作代碼 。 我僅添加了2級問題...您可以添加更多問題。

點擊查看工作演示

 <div id="first">
    <p id ="text">How are you?</p>
    </div>


    <input type="button" id="b1" value="Good!" /> 
    <input type="button" id="b2" value="Bad!"/> 

   <script>
    $("#b1").click(function(){

        if($("#b1").val()=="Good!")
        {
       $("#text").text("Good To hear that ! Do you want to spread a smile ?");
            $("#b1").val("Yes");
             $("#b2").val("No");
        }


    });


    $("#b2").click(function(){

        if($("#b2").val()=="Bad!")
        {
       $("#text").text("Ohh Sad ! Do you want my help ?");
            $("#b1").val("Yes");
             $("#b2").val("No");
        }


    }); </script>

點擊查看工作演示

我僅對問題1的兩個按鈕都做了問題更改，剩下的可以添加。 包括jQuery文件

Answer 4

在我的解決方案中，按鈕的文本已更改。 遵循對象的決策樹。

<input type="button" id="left" value="good" onclick="buttonclick(this.value)"/> 
<input type="button" id="right" value="bad" onclick="buttonclick(this.value)"/> 
<script type="text/javascript">

decision_tree = {
    'bad': {
        'some A': 'done',
        ' some B' : 'done'
    },
    'good': {
        'yes': {
            'like':'done',
            'dont like':'done'
        }, 
        'no':'done'
    }
};

left = document.getElementById("left");
right = document.getElementById("right");
st = decision_tree;
function buttonclick(v) {
    alert('you have clicked ' + v);
    if(st[v] == 'done'){
        alert('you are done with questionnaire');
        left.style.visibility = 'hidden';
        right.style.visibility = 'hidden';
    } else{
        console.log(st[v]);
        left.setAttribute("value",Object.keys(st[v])[0]);
        right.setAttribute("value",Object.keys(st[v])[1]);
        st = st[v];
    }

}
 </script>

單擊按鈕后如何顯示新的按鈕？

問題描述

4 個解決方案

解決方案1
0 2015-10-23 07:23:18

解決方案2
0 2015-10-23 07:28:40

解決方案3
0 2015-10-23 07:30:59

解決方案4
0 2015-10-23 07:53:04

單擊按鈕后如何顯示新的按鈕？

問題描述

4 個解決方案

解決方案1 0 2015-10-23 07:23:18

解決方案2 0 2015-10-23 07:28:40

解決方案3 0 2015-10-23 07:30:59

解決方案4 0 2015-10-23 07:53:04

解決方案1
0 2015-10-23 07:23:18

解決方案2
0 2015-10-23 07:28:40

解決方案3
0 2015-10-23 07:30:59

解決方案4
0 2015-10-23 07:53:04