HTML和Javascript改變可見性

我試過多次搜索這個。我已經接近，但還沒有弄清楚。我試圖做的是當用戶達到一定量的點擊時，彈出一個按鈕。HTML和Javascript改變可見性

<!DOCTYPE html> 
<html> 
<head> 
    <title>++ Increment</title> 
</head> 
<body> 
    <h1>Click the Button</h1> 
    <input type="button" id="countButton" onclick="hi()" value="Click Me!"/> 
    <p class="ClickCount">Clicks: <a id="amount">0</a></p> 
    <input type="button" id="countButton" onclick="store()" value="Store"/> 
    <input type="button" style="visibility:hidden;" value="Button" id="Sir" /> 
</body> 
</html>

這裏是JavaScript：

var count = 0; 
function hi() { 
    count += 1; 
    document.getElementById("amount").innerHTML = count; 
} 
if (count >= 20) { 
    document.getElementById("Sir").style.visibility = "visible"; 
}

我想我需要的計數變量分配喜（）函數外面，但我不知道該怎麼做（或者如果可能的話）

來源

2016-05-19 I_boom5245

試着把'if（count> = 20）{...}'函數裏面'hi' – Clint

從移動所以請原諒我的僞代碼

就是你使用jQuery，您可以將值存儲在 $（btn）.data（'clicks'）

否則在您的hi函數上方定義一個全局變量。

然後，你需要把如果（點擊> 20）你喜函數中的你的邏輯

來源

2016-05-19 02:15:55

試試這個：

<!DOCTYPE html> 
<html> 
<head> 
    <title>++ Increment</title> 
</head> 
<body> 
    <h1>Click the Button</h1> 
    <input type="button" id="countButton" value="Click Me!"/> 
    <p class="ClickCount">Clicks: <a id="amount">0</a></p> 
    <!-- <input type="button" id="countButton" onclick="store()" value="Store"/> --> 
    <input type="button" style="visibility:hidden;" value="Button" id="Sir" /> 
    <script> 
     var count = 0; 
     var clickbutton = document.getElementById("countButton"); 
     var showbutton = document.getElementById("Sir"); 
     var amountstatus = document.getElementById("amount"); 

     clickbutton.onclick = function(){ 
      if(count < 3){ 
       count++; 
       amountstatus.innerHTML = count; 
      } 
      else{ 
       showbutton.style.visibility = "visible"; 
      } 
     } 
    </script> 
</body> 
</html>

檢查，我把這個<input type="button" id="countButton" onclick="store()" value="Store"/>的意見，這就是爲什麼你不能有兩個同名的id。

來源

2016-05-19 02:19:32

您好可以請您給一個嘗試下面的下面的代碼：

var count = 0; 
 
function hi() { 
 
    count += 1; 
 
    document.getElementById("amount").innerHTML = count; 
 

 
    if (count >= 20) { 
 
    document.getElementById("Sir").style.visibility = "visible"; 
 
    } 
 
}

只有改變，我認爲移動如果喜函數內部條件。希望工程

來源

2016-05-19 02:20:56

var count = 0; 
 
function store(){ 
 
    alert(count); 
 
} 
 
function hi() { 
 
    count += 1; 
 
    document.getElementById("amount").innerHTML = count; 
 
    if (count >= 4) document.getElementById('Sir').style.display = 'inline-block'; 
 
}

#Sir{display:none;}

<h1>Click the Button</h1> 
 
<input type="button" id="countButton" onclick="hi()" value="Click Me!"/> 
 
<p class="ClickCount">Clicks: <a id="amount">0</a></p> 
 
<input type="button" id="countButton" onclick="store()" value="Store"/> 
 
<input type="button" value="Button" id="Sir" />

來源

2016-05-19 02:23:53 gibberish

我與Zakk同意。將值存儲在數據屬性中將是執行此操作的最佳方法。這是我的代碼。

$(function() { 
 
    
 
    $("#countButton").on("click", function() { 
 
    
 
    var clicks = $(this).data("clicks"); 
 
    clicks++; 
 
    
 
    // Display the clicks. 
 
    $("#amount").html(clicks); 
 
    $(this).data("clicks", clicks); 
 
    
 
    // Check to see if the sir button should be displayed. 
 
    if(clicks >= 20) { 
 
     
 
     $("#Sir").css("visibility", "visible"); 
 
     
 
    } 
 
    
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>++ Increment</title> 
 
</head> 
 
<body> 
 
    <h1>Click the Button</h1> 
 
    <input type="button" id="countButton" data-clicks="0" value="Click Me!"/> 
 
    <p class="ClickCount">Clicks: <a id="amount">0</a></p> 
 
    <input type="button" id="countButton" onclick="store()" value="Store"/> 
 
    <input type="button" style="visibility: hidden;" value="Button" id="Sir" /> 
 
</body> 
 
</html>

來源

2016-05-19 02:25:46

我相信「最好」是一種觀點;特別是因爲我個人不相信使用一個元素來存儲變量，並且不得不引用元素以獲取它，這將是最好的解決方案（至少不能很容易地避免）。 –

爲什麼添加另一個任意變量時，您可以保持與影響它的對象鏈接的數據？ –

我認爲這個問題是爲什麼將數據綁定到元素，當你可以創建一個簡單的變量來存儲值？什麼是武斷的？ –

你的條件是函數喜（）之外，因此該文件加載時檢查一次，不喜時，（）是調用。

所以你可以把你的條件放在hi（）中。

var count = 0; 
function hi() { 
    count += 1; 
    document.getElementById("amount").innerHTML = count; 

    if (count >= 20) { 
    document.getElementById("Sir").style.visibility = "visible"; 
    } 
}

來源

2016-05-19 02:26:49 Metylene

HTML和Javascript改變可見性

回答

相關問題