Warum funktioniert nur die Hälfte meines Knopfes?

Question

Ich habe einige Knöpfe auf einer Seite, die ich mache, aber wenn ich die Knöpfe breiter mache, werden sie breiter, aber nur die erste Hälfte von ihnen ist anklickbar und ich weiß nicht, was das Problem ist?

Dies ist der JavaScript-Code und ich denke nicht, dass das das Problem ist.

// 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()); 

ist die CSS und ich denke, das Problem

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; 
} 

hier könnte Oder vielleicht hier das Problem ist

<!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

Es gibt hier viel los, und viele Probleme. Aber die Grund einige Tasten erscheinen nicht anklickbar ist, weil Sie Strukturierung und Styling "vermasselt" haben.

Ihr saveButton Element nur ein absolute ly positioniertes Element enthält (also dieser Elternteil nicht verschwindet und sitzt oben auf dem Element „großer Knopf“ Eltern), die untergeordnete Elemente hat (li), das sind block positioniert und „überfüllt "von den" großen Tasten "anklickbarer Bereich.

Ehrlich gesagt, es gibt so viele Probleme, über die jeder zu lange dauern würde.

Um Ihr „Klick“ Problem zu beheben Sie haben ein paar Optionen:

1. Für die großen Tasten, fügen position: relative; z-index: 99 oder höheren z-index Wert - diese jedoch z Positionierung Ihrer Elemente vermasseln könnte.
2. Für das .saveButton ul Element, entfernen Sie die position: absolute
3. Für die .saveButton ul > li Elemente hinzufügen display: inline-block

Jede ein derer, wird Ihr Problem lösen, aber ich empfehle neu zu bewerten Ihre html Strukturierung und css Styling.

Fiddle mit einer der oben genannten Techniken.

Answer 2

Das Problem ist, mit Ihrer Positionierung von ul, die das Spiel Speicher und lädt ein vorheriges Spiel beherbergt Links.

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

Die ungeordnete Liste ist auf den Schaltflächen überlagert. Im Bild unten sehen Sie die Grenze der ungeordneten Liste und sie bleibt über den Schaltflächen. Aus diesem Grund können Sie nicht richtig auf die obersten vier Schaltflächen klicken.

Um dies zu beheben, setzen Sie Ihre ul richtig. Ich würde Ihnen empfehlen, zuerst die Struktur Ihrer Seite zu ändern.Entfernen Sie die absolute Position auf dem ul Element, wenn Sie damit einverstanden sind. Ohne die position:absolute zu entfernen, wäre eine temporäre Lösung

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

Hinweis sein: Wenn Sie Element in den Developer Tools Überprüfen Sie verwenden, können Sie die Grenze jeder DOM-Element finden.