Question

我最近使用HTML为学校项目创建程序。一切都进行得很顺利，直到现在。我放置的任何按钮或文字似乎被屏障挡住了，但我不知道是什么。

我有一个JSFiddle链接，但对于实际程序，我使用的是Adobe Edge-Code http://jsfiddle.net/nwsuoarw/1/ 问题在于

<button id="b4">Leave</button> 和 <button id="b5">Newspaper</button>

非常感谢您提前。

编辑：我说这个问题非常糟糕，为此我道歉。我的意思是我不能将按钮放在主盒子里面。或者在代码中已知它

<div class="one">

Answer 1

工作代码演示

http://jsfiddle.net/nadeemmnn2007/nwsuoarw/2/

问题在于你包含在jsfiddle中的脚本文件的 HTML

<div class="one"> <div class="two"></div> <div class="three"> <p id="p1">Honey</p> <button id="b1", onclick="myFunction()">Buy</button> <script> function myFunction() { var area = Number(prompt("How many pounds of Honey would you like? ($0.39 per pound)")); var answer = (area * 0.39); confirm("$" + answer); } </script> </div> <div class="four"> <p id="p2">Beeswax</p> <button id="b2"onclick="myFunction()">Buy</button> <script> function myFunction() { var area = Number(prompt("How many pounds of Beeswax would you like? ($0.39 per pound)")); var answer = (area * 0.39); confirm("$" + answer); } </script> </div> <div class="five"> <button id="b3">Tour</button> </div> <div class="face"> <button>Help</button> </div> <div class="six"> </div> <div class="seven"> </div> <div class="eight"> <button id="b5">Newspaper</button> </div> <button id="b4">Leave</button> </div> <h1 id="h1">Welcome to Maycomb Honeycomb!</h1> <h3>This is our virtual tour v1.0! Enjoy!<h3>

Answer 2

问题在于DIV 8的CSS ...如果你删除CSS报纸点击罚款。你有几个选择。

为Div 8调整CSS - 请说删除它......（如果你不能这样做的话）
将报纸按钮放在div 8之外。

爱情按钮在您提供的小提琴中点击了。

Code is below in fiddle

http://jsfiddle.net/nwsuoarw/4/

Answer 3

我猜你错过了点击事件和脚本中的功能。如果是这样的话，请参见下文：

<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script type='text/javascript' src='script.js'></script>

<div class="one">
    <div class="two"></div>
    <div class="three">
        <p id="p1">Honey</p>
        <button id="b1", onclick="myFunction();">Buy</button>
        <script>
            function myFunction() {
            var area = Number(prompt("How many pounds of Honey would you like? ($0.39 per pound)"));
            var answer = (area * 0.39);
            confirm("$" + answer);
            } 
function leave(){
// your code goes here;
}
function Newspaper(){
// your code goes here;
}
        </script>               
    </div>
    <div class="four">
        <p id="p2">Beeswax</p>
        <button id="b2"onclick="myFunction()">Buy</button>
        <script>
            function myFunction() {
            var area = Number(prompt("How many pounds of Beeswax would you like? ($0.39 per pound)"));
            var answer = (area * 0.39);
            confirm("$" + answer);
            } 
        </script>
    </div>
    <div class="five">
        <button id="b3">Tour</button> 
    </div>
    <div class="face">
        <button>Help</button>
    </div>
    <div class="six">
    </div>
    <div class="seven">
    </div> 
    <div class="eight">
        <button id="b5"onclick="Newspaper();">Newspaper</button>
    </div>
    <button id="b4" onclick="leave();">Leave</button>
</div>
<h1 id="h1">Welcome to Maycomb Honeycomb!</h1>
<h3>This is our virtual tour v1.0! Enjoy!<h3>

HTML / CSS按钮问题

3 个答案: