Question

我想要的是：
制作显示“您已选择座位1”的<div>消息，当我点击<div>内的相关按钮时。另外，应该可以单击多个按钮，这将导致正确显示“您已选择1，...和x”。消息。

问题
我怎么能这样做呢？

辅助信息
我需要这个用于很多按钮，因为它是一个电影预约系统。

到目前为止我有什么

   <script>
       function text(id){
           document.getElementById("bookingDiv").innerHTML = "seat 1";
       }
   </script>
</head>

<body onload="load()">
    <input class="textbutton" type="button" id="Button1" value="seat1"
           onclick="text(Button1)"/>
    <input class="textButton"type="button" id="Button2" value="seat2"
           onclick="text(Button2)"/>

    <div id="bookingDiv" type="text">
        you have selected button:
    </div>
</body>
</html>

感谢您的任何建议！

Answer 1

试试这个：

document.getElementById("#bookingDiv").innerHTML = "seat 1";

Answer 2

<强> HTML

<input class="textbutton" type="button" id="Button1" value="seat1" />
<input class="textbutton"type="button" id="Button2" value="seat2" />
<div id="bookingDiv" type="text">
you have selected button:
</div>

<强>的JavaScript

$(document).ready(function(){
    $('.textbutton').on("click",function(){
        $('#bookingDiv').html( $('#bookingDiv').html() + ';' + $(this).attr('value') );
    });
});

添加以下JavaScript参考

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" />

Answer 3

要设置div的文本，请使用其innerhtml属性：

$("#bookingDiv").innerhtml("you have selected blah blah blah");

编辑：

您应该将座位按钮更改为复选框。然后你可以看看他们是否被检查过：

if ($("#chkSeat1").prop("checked"))

试试这个：在所有座位复选框中添加一个名为“SeatButtons”的类（将它们从按钮更改为复选框）。给他们ID'chkSeat1'，'chkSeat2'等。然后，每次点击'SeatButtons'复选框，你可以遍历所有这些复选框，看看他们是否被选中，如下所示：

$(".SeatButtons").click(function(){
var SeatList = "";
var PickedASeatAlready = false;
$("#.SeatButtons").each(function(){
    if ($(this).prop("checked")){
       if (PickedASeatAlready )
            SeatList += ", ";
       SeatList += $(this).prop("id").replace("chkSeat", "");
       PickedASeatAlready = true;
    }
});
if (PickedASeatAlready )
   $("#bookingDiv").innerthtml = "You have selected seats " + SeatList;
else
    $("bookingDiv").innerhtml = "You have not yet selected any seats";

});

Answer 4

查看此实例

http://fiddle.jshell.net/a53pfLja/

function text(data){

document.getElementById("button").innerHTML = data;

}


</script>




<body>



<input class="textbutton" type="button" id="Button1" value="seat1" onclick="text('Button1')"/>
<input class="textButton"type="button" id="Button2" value="seat2" onclick="text('Button2')"/>
<div id="bookingDiv">
    <span>
        you have selected button:
    </span>
    <span id="button">
    </span>
</div>


</body>

使用JavaScript </div>在<div>中编写

4 个答案: