當前顯示div

我想要顯示一個div（取決於輸入的值），但我沒有看到控制檯中的錯誤，指向正確的方向，但我的代碼出現問題：當前顯示div

<style type="text/css"> 

#outputOne{display: none;} 
#outputTwo{display: none;} 
#outputThree{display: none;} 

</style> 

</head> 

<body> 


<form method="POST" onsubmit="return showResults()"> 

    <input type="text" id="valueOne" /><br /> 
    <input type="text" id="valueTwo" /><br /> 
    <input type="text" id="valueThree" /><br /> 
    <input type="submit" id="submit" /> 

</form> 

    <div id="outputOne">Value One</div> 
    <div id="outputTwo">Value Two</div> 
    <div id="outputThree">Value Three</div> 


<script> 

function showResults(){ 

    if(value <= 100){ 
    document.getElementById('outputOne').style.display = "block"; 
    return true; 
    } if(value > 500){ 
    document.getElementById('outputTwo').style.display = "block"; 
    return true; 
    }if(value > 10000){ 
    document.getElementById('outputThree').style.display = "block"; 
    return true; 
    } 
} 

</script>

來源

2016-02-28 PhpDude

哪裏'value' DEFI ned？ –

形式將提交......來不及了，除非你使用AJAX – charlietfl

好了，有幾個問題：

你從來沒有定義value該函數裏面......你需要做的。其次，表單提交將刷新頁面，撤消所做的任何DOM更改。這可以通過將其更改爲調用您的功能的按鈕來解決。下面是工作代碼的更新版本：

<style type="text/css"> 

.hide{display: none;} 
.show{display: block;} 
.submit{height:20px; width: 100px;} 

</style> 

</head> 

<body> 

    <input type="text" id="valueOne" /><br /> 
    <input type="text" id="valueTwo" /><br /> 
    <input type="text" id="valueThree" /><br /> 
    <button id="submit" class="submit" onClick="showResults()"></button> 

    <div id="outputOne" class="hide" >Value One</div> 
    <div id="outputTwo" class="hide" >Value Two</div> 
    <div id="outputThree" class="hide" >Value Three</div> 

<script> 

function showResults(){ 

    var value = parseInt(document.getElementById('valueOne').value) + parseInt(document.getElementById('valueTwo').value) + parseInt(document.getElementById('valueThree').value); 

    if(value <= 100){ 
     document.getElementById('outputOne').className = "show"; 
    } else { 
     document.getElementById('outputOne').className = "hide"; 
    } 
    if(value > 500){ 
     document.getElementById('outputTwo').className = "show"; 
    } else { 
     document.getElementById('outputTwo').className = "hide"; 
    } 
    if(value > 10000){ 
     document.getElementById('outputThree').className = "show"; 
    } else { 
     document.getElementById('outputThree').className = "hide"; 
    } 
} 

</script>

我也切換的CSS使用類，這是一個更加靈活和更好的做法。

信用扎卡里亞Acharki併爲察覺的form錯誤造成的刷新穆赫辛azeem，並向總是有益charlietfl對於和指出我自己的愚蠢錯誤的submit按鈕。

來源

2016-02-28 22:24:52 millerbr

嗯......這是在提交處理 – charlietfl

查理啊，總是在那裏給我打電話了我的錯誤就在我看到他們自己改變UI：P我剛修好了哈哈！ – millerbr

因此，現在有道理，因爲我沒有聲明'價值'所以我怎麼會將其他箱子綁定在一起，以合計值？任何指針將是巨大的（JS不是我的技能） – PhpDude

如果你想看到的東西，你應該防止返回false，而不是真實的，因爲現在的形式將在所有的情況下提交，您將再也看不到顯示，因爲頁面將會被刷新股利提交。

希望這會有所幫助。

來源

2016-02-28 22:23:59

您需要定義value變量，然後在每一個返回false，如果讓div將顯示在submit否則頁面將刷新所有默認設置將會在

來源

2016-02-28 22:27:13

嘗試替代oninput事件onsubmit事件

<head> 
 
    <style type="text/css"> 
 
    #outputOne { 
 
     display: none; 
 
    } 
 
    #outputTwo { 
 
     display: none; 
 
    } 
 
    #outputThree { 
 
     display: none; 
 
    } 
 
    </style> 
 
    <script> 
 
    
 
    function showResults() { 
 
     var value = this.value; 
 
     
 
     console.log(value); 
 
     if (value <= 100) { 
 
     divs[0].style.display = "block"; 
 
     divs[1].style.display = divs[2].style.display = "none"; 
 
     } 
 
     if (value > 500) { 
 
     divs[1].style.display = "block"; 
 
     divs[0].style.display = divs[2].style.display = "none"; 
 
     } 
 
     if (value > 10000) { 
 
     divs[2].style.display = "block"; 
 
     divs[0].style.display = divs[1].style.display = "none"; 
 
     } 
 
    } 
 
    window.onload = function() { 
 
     divs = document.querySelectorAll("div[id^=output]"); 
 
     Array.prototype.forEach.call(document.forms[0].querySelectorAll("input") 
 
     , function(el) { 
 
     el.setAttribute("placeholder", "enter a number"); 
 
     el.oninput = showResults; 
 
     }); 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 

 

 
    <form method="POST"> 
 

 
    <input type="text" id="valueOne" /> 
 
    <br /> 
 
    <input type="text" id="valueTwo" /> 
 
    <br /> 
 
    <input type="text" id="valueThree" /> 
 
    <br /> 
 
    <input type="submit" id="submit" disabled /> 
 

 
    </form> 
 

 
    <div id="outputOne">Value One</div> 
 
    <div id="outputTwo">Value Two</div> 
 
    <div id="outputThree">Value Three</div> 
 
</body>

來源

2016-02-28 22:42:31 guest271314

如果有另一個被調用，你如何獲得上述隱藏的div？因此，如果您返回valueOne，然後更改值以獲取valueTwo，但是會再次隱藏valueOne？ – PhpDude

@Dan _「你如何獲得上述隱藏一個div，如果另一個被調用？所以如果你返回valueOne然後改變這些值來獲得valueTwo，然後再隱藏valueOne？ – guest271314

回答

相關問題