ボタンの半分しか機能しないのはなぜですか？

Question

私は自分が作成しているサイトにいくつかのボタンを持っていますが、ボタンを広げると幅が広がりますが、最初の半分だけがクリック可能で、問題は何か分かりません。

これはJavaScriptのコードで、私はそれが問題だとは思わない。ここで

// this is where the main JavaScript and some jQuery runs to make the site work 

// variable with your'e money 
var money = 0; 
var totalTimesClicked = 0; 


// Hide all buttons 
$("#but1").hide(); 
$("#but2").hide(); 
$("#but3").hide(); 
$("#but4").hide(); 
$("#but5").hide(); 
$(".codeLines").hide(); 

// function used to generate money 
function getmoney(income) { 
    money = money + income; 
} 

// automatically makes money untill 100 money 
window.setInterval(function(){ 
    if (money < 100) { 
     getmoney(0.1); 
    } 
// automatically makes money untill 500 money 
    else if (money > 100 && money < 500) { 
     getmoney(0.05) 
    } 
    document.getElementById("money").innerHTML = Math.round(money*10)/10; 
}, 100) 

// make the click to make money button appear when you have more money than 10 
var buldings1_appear = setInterval(function(){ 
if (money >= 9) { 
$("#but1").slideDown("slow"); 
} 
// make the auto income button appear when you have more money than 20 
if (money >= 20) { 
$("#but4").slideDown("slow"); 
} 
},1000) 

var clickEffect = 1; 
// the click to make money function 

$("#but1").click(function(){ 
    getmoney(clickEffect); 
    totalTimesClicked = totalTimesClicked + clickEffect; 
     document.getElementById("money").innerHTML = Math.round(money*10)/10; 
     document.getElementById("totalTimesClicked").innerHTML = totalTimesClicked; 
$("#but2").slideDown("slow"); 
}); 

// make more money by clicking on button 1 
var clicks = 0; 
$("#but2").click(function(){ 
    var cost = 50; 
    var multiplyBut1Cost = Math.floor(cost*Math.pow(1.3,clicks)); 
    if (money >= multiplyBut1Cost) { 
     money = money - multiplyBut1Cost; 
     clickEffect = clickEffect + 1; 
     clicks = clicks + 1;  
    document.getElementById("money").innerHTML = Math.round(money*10)/10; 
    document.getElementById("clickEffect").innerHTML = clickEffect; 
    if (clicks >= 5) { 
$("#but3").slideDown("slow"); 
    } 
} 
var multiplyBut1NextCost = Math.floor(cost * (Math.pow(1.3, clicks))); 
    document.getElementById("multiplyBut1Cost").innerHTML=multiplyBut1NextCost; 

}) 

var but3clicks = 0; 
$("#but3").click(function(){ 
    var cost = 1000; 
    var multiplyBut1Cost2 = Math.floor(cost*Math.pow(1.2, but3clicks)); 
    if (money >= multiplyBut1Cost2) { 
     money = money - multiplyBut1Cost2; 
     clickEffect = clickEffect + 5; 
     but3clicks = but3clicks + 1;  
    document.getElementById("money").innerHTML = Math.round(money*10)/10; 
    document.getElementById("clickEffect").innerHTML = clickEffect; 
} 
var multiplyBut1NextCost = Math.floor(cost * (Math.pow(1.3, but3clicks))); 
    document.getElementById("multiplyBut1Cost2").innerHTML=multiplyBut1NextCost; 

}) 

var effect = 0.1; 
var but4income = 0; 
var but4bought = 0; 
var but4spawned = 0; 
function buyBut4(){ 
    var cost = 25; 
    var but4cost = Math.floor(cost*Math.pow(1.2,but4bought)); 
     if(money>=but4cost){ 
     but4bought = but4bought+1; 
     money = money - but4cost; 
     but4income = (but4bought + but4spawned) * effect; 
     document.getElementById("but4bought").innerHTML = but4bought; 
     document.getElementById("money").innerHTML = money; 
if (but4bought >= 5) { 
    $("#but5").slideDown("slow"); 
} 

} 
    var nextCost = Math.floor(cost*Math.pow(1.2,but4bought)); 
    document.getElementById("but4cost").innerHTML = nextCost; 
}; 

setInterval(function(){ 
    getmoney((but4bought + but4spawned) * effect) 
document.getElementById("money").innerHTML = Math.round(money*10)/10; 

},100) 

var but5effect = 0.001; 
var but5bought = 0; 
var but5income = 0; 
function buyBut5(){ 
    var cost = 1000; 
    var but5cost = Math.floor(cost*Math.pow(1.4,but5bought)); 
     if(money>=but5cost){ 
     but5bought = but5bought+1; 
     money = money - but5cost; 
     but5income = but5bought * but5effect; 
     document.getElementById("but5bought").innerHTML = but5bought; 
     document.getElementById("money").innerHTML = money; 
     document.getElementById("but5income").innerHTML = Math.round(but5income * 1000)/100; 
    }; 
    var nextCost = Math.floor(cost*Math.pow(1.4,but5bought)); 
    document.getElementById("but5cost").innerHTML = nextCost; 
}; 

setInterval(function(){ 
    but4spawned = but4spawned + but5bought * but5effect; 
    but4income = (but4bought + but4spawned) * effect; 
    document.getElementById("but4spawned").innerHTML = Math.round(but4spawned*10)/10; 
    document.getElementById("but4income").innerHTML = Math.round(but4income * 100)/10; 
},100) 





Window.onload = function supportsLocalStorage() { 
     try { 
     return 'localStorage' in window && window['localStorage'] !== null; 
     } catch(e){ 
     return false; 
     } 
    } 

function saveGame(){ 
    localStorage.setItem('money', JSON.stringify(money)); 
} 

function loadGame(){ 
    money = JSON.parse(localStorage.getItem('money')) 
    console.log(localStorage.getItem('money')) 
    document.getElementById("money").innerHTML = localStorage.getItem("money"); 
} 

function makeMoneySite(){ 
    $(".buildings").show("slow"); 
    $(".upgrades").hide("slow"); 
} 

function upgradesSite(){ 
    $(".buildings").hide("slow"); 
    $(".upgrades").show("slow"); 
} 

// Window.onload(loadGame()); 

は、CSSで、私はこの問題は、ここに

h1 { 
    font-size: 22px; 
    font-weight: bold; 
} 

.resources ul { 
    list-style-type: none; 
    font-size:18px; 
} 

.tabs ul li { 
    list-style-type: none; 
    float: left; 
    font-size: 20px; 
    font-weight: bold; 
    padding-left: 5%; 
    position: relative; 
} 

.saveButton ul{ 
    padding: 5%; 
    width: 60%; 
    position: absolute; 
    text-align: right; 
    font-size: 16px; 
    margin-left: 10%; 
    margin-bottom: 1%; 
    list-style-type: none; 
} 

.buildings ul { 
    list-style-type: none; 
    float: left; 
} 


.buildings button { 
    width: 300px; 
    height: 64px; 
} 

.tooltip { 
    position: relative; 
    display: inline-block; 
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ 
} 

/* Tooltip text */ 
.buildings button .tooltiptext { 
    visibility: hidden; 
    width: 300px; 
    background-color: black; 
    color: #fff; 
    text-align: center; 
    padding: 5px 0; 
    border-radius: 6px; 

    /* Position the tooltip text - see examples below! */ 
    position: absolute; 
    z-index: 1; 
} 

/* Show the tooltip text when you mouse over the tooltip container */ 
.buildings button:hover .tooltiptext { 
    visibility: visible; 
} 

それとも問題はここに

<!DOCTYPE html> 
<html> 
<head> 
    <title>Increment</title> 
    <link rel="stylesheet" type="text/css" href="main.css"> 
</head> 
<body> 
<!-- the header --> 
<h1> U will automatically gain 1 money untill you have 100 money and 0.5 money between 200 and 500 money </h1> 

<!-- the class with the resources u need to play the game --> 
<div class="resources"> 
<ul> 
    <li> Money <span id="money"> 0 </span></li> 
    <li> Money made by clicking <span id="totalTimesClicked"> 0 </span></li> 
    <li class="codeLines"> Lines of code <span id="linesOfCode"> 0</span></li> 
</ul> 
</div> 

<div class="tabs"> 
<ul> 
<li onclick="makeMoneySite()"> Buildings</li> 
<li onclick="upgradesSite()"> Upgrades </li> 
<li> Prestige </li> 
</ul> 
</div> 

<div class="saveButton"> 
<ul> 
    <li> <button onclick="saveGame()"> Save your progress</button> </li> 
    <li> <button onclick="loadGame()"> Load a previous game</button> </li> 
</ul> 
</div> 

<br> 
<br> 

<!-- class with the first row of buttons --> 
<div class="buildings"> 
<ul class="clickerBuildings"> 
<!-- the click to make money button with the tooltip inside of it --> 
    <li> 
     <button id="but1"> Click here to make money <p class="tooltiptext">By clicking here u make <span id="clickEffect"> 1 </span> money per click</p></button> 
    </li> 

<!-- the button to make the click button more effecient with the tooltip inside of it --> 
    <li> 
     <button id="but2"> Make the click button better <p class="tooltiptext"> Click here to make 1 more money per click on the click button above at the cost of <span id="multiplyBut1Cost"> 50 </span> money </p></button> 
    </li> 

<!-- the button to make the click button super effecient with the tooltip inside --> 
    <li> 
     <button id="but3"> Make the click button even better! <p class="tooltiptext"> Click here to make 5 more money per click on the click button above at the cost of <span id="multiplyBut1Cost2"> 1000 </span> money </p> </button> 
    </li> 
</ul> 


<ul class="autoincome"> 
    <li> 
     <button id="but4" onclick="buyBut4()"> Click this to make automatic income <p class="tooltiptext">The automatic income costs <span id="but4cost"> 25 </span> <br> You have bought <span id="but4bought">0 </span> automatic income machines and spawned <span id="but4spawned"> 0 </span> but4's <br> But4 total income <span id="but4income"> 0</span> per second</p></button> 
    </li> 

    <li> 
     <button id="but5" onclick="buyBut5()"> Click here to spawn but4's <p class="tooltiptext"> The but5 costs <span id="but5cost"> 1000 </span> <br>Your <span id="but5bought"> 0 </span> but5's spawns <span id="but5income"> 0 </span> but4's per second </p></button> 
    </li> 
</ul> 

</div> 







<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> 
<script type="text/javascript" src="main.js"></script> 
</body> 
</html> 

Answer 1

ある可能起こって多くがここにあると思うし、多くの問題。しかし、の理由いくつかのボタンはクリックできないように見えます。なぜなら、あなたは構造化とスタイリングを「うんざり」しているからです。

あなたsaveButton要素が単独blockが配置されている子要素（li）を有し、「溢れabsolute LY位置付け要素を（したがって、この親がクリアされないと「大きなボタン」親要素の上に座っている）、含まれてい"大きなボタン"のクリック可能な領域の "

正直言って、それぞれの問題を処理するのには非常に多くの問題があります。これは、しかし、あなたの要素のz位置をダウンさせる可能性がある - 、大きなボタンの

1. position: relative; z-index: 99または任意の高いz-index値を追加します。あなたのあなたは、いくつかのオプションを持っている問題を「クリック」解決するには

   。

2. .saveButton ul要素については、あなたの問題を解決しますこれらのdisplay: inline-block

どれを追加し、.saveButton ul > li要素についてはposition: absolute

を削除し、私は非常にお勧めあなたのhtml構造化とcssを再評価スタイリング。

Fiddle上記の技術のいずれかを使用してください。

Answer 2

問題が保存ゲームとロード前回のゲームリンクを収容するulのあなたの位置です。

<ul> 
    <li> <button onclick="saveGame()"> Save your progress</button> </li> 
    <li> <button onclick="loadGame()"> Load a previous game</button></li> 
</ul> 

ボタンには、順序付けられていないリストがオーバーレイされています。下の画像では、順序付けされていないリストの境界を見ることができ、ボタンの上にとどまります。そのため、上位4つのボタンを適切にクリックできません。

この問題を解決するには、あなたのul適切に配置します。あなたのページの構造を最初に変更することをお勧めします。あなたがそれで大丈夫ならば、ul要素の絶対位置を削除してください。 position:absoluteを削除せずに、一時的な修正は

.saveButton ul{ 
    margin-top:20%; 
} 

注意を次のようになります。あなたが開発者ツールの要素を点検して使用する場合は、すべてのDOM要素の境界を見つけることができます。