单击按钮后如何显示新的按钮？
[英]How to show a new Button after Button was clicked?
问题描述
Here is my problem. 
这是我的问题。 I want to create a questionnaire. 我想创建一个问卷。
How are you? 你好吗？ A)Button "Good" B)Button "Bad" A）“好”按钮B）“坏”按钮
ie user click button B.) 即用户单击按钮B。）
Alert Window is shown and notifying user about his/her last choice. 显示警报窗口，并通知用户有关他/她的最后选择。 New Question and Buttons appear on the same page. 新问题和按钮出现在同一页面上。 Essentially, users will go through the set of questions on the same page. 本质上，用户将在同一页面上浏览一系列问题。
Why are you Bad? 你为什么不好？ A)Button "Some Txt" B.)Button "Some Txt" A）“ Some Txt”按钮B。）“ Some Txt”按钮
How can I show new question and new buttons on the same page. 如何在同一页面上显示新问题和新按钮。 The concept should follow some kind of decision tree logic. 该概念应遵循某种决策树逻辑。
Solutions, advises or "where-to-check hints" appreciated. 解决方案，建议或“哪里检查提示”表示赞赏。 Please, help me! 请帮我！
<!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>
4 个解决方案
解决方案1
0 2015-10-23 07:23:18
You might want to explore JQuery a bit. 您可能需要探索一下JQuery。
Particularly something around the .click() API https://api.jquery.com/click/ 特别是有关.click（）API https://api.jquery.com/click/的内容
Are you intending to do this just on the client side? 您打算只在客户端执行此操作吗？ I would recommend doing this through a client/server model thou eg Angular(Client) -> NodeJS(Server) 我建议您通过客户端/服务器模型来执行此操作，例如Angular（Client）-> NodeJS（Server）
That is, having the question generation logic in node and let the client consume the questions however it is not impossible to do everything on the client. 也就是说，在节点中具有问题生成逻辑并让客户端使用问题，但是并非不可能在客户端上做所有事情。
So you code will be something like 所以你的代码将类似于
<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>
解决方案2
0 2015-10-23 07:28:40
You will need to use some javascript to hide/show your different steps. 您将需要使用一些JavaScript来隐藏/显示您的不同步骤。 With JQuery for example you can do something like that: 例如，使用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>
Don't forget to add the JQuery library to make it work. 不要忘记添加JQuery库以使其工作。 The function can also be replaced by .click from JQuery. 该功能也可以由JQuery中的.click代替。
I hope this will help. 我希望这将有所帮助。
解决方案3
0 2015-10-23 07:30:59
WORKING CODE FOR YOU . 为您工作代码 。 I have added 2 level question only ... you can add more questions. 我仅添加了2级问题...您可以添加更多问题。
Click for working demo 点击查看工作演示
<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>
Click for working demo 点击查看工作演示
I have done question changes for both button of question 1 only... rest you can add . 我仅对问题1的两个按钮都做了问题更改，剩下的可以添加。 Include the jquery file 包括jQuery文件
解决方案4
0 2015-10-23 07:53:04
In my solution buttons' texts are changed. 在我的解决方案中，按钮的文本已更改。 A decision tree of object is followed. 遵循对象的决策树。
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.