简体   繁体   中英

How to make things dissapear on load

function vanish() {
    document.getElementById("priceCheck").style.visibility = "hidden";
}

<body onload="vanish">
    <div>
        <input type="button" class="input_button" name="onestarbtn" value="One Star"/>
        <input type="button" class="input_button" name="twostarbtn" value="Two Star"/>
        <input type="button" class="input_button" name="threestarbtn" value="Three Star"/>
        <input type="button" class="input_button" name="fourstarbtn" value="Four Star"/>
        <input type="button" class="input_button" name="fivestarbtn" value="Five Star"/>    
    </div>

    <div id="priceCheck">
        test1
    </div>    
    <div id="priceCheck">
        test2
    </div>    
    <div id="priceCheck">
        test3
    </div>    
    <div id="priceCheck">
        test4
    </div>    
    <div id="priceCheck">
        test5
    </div>
</body>

I want it to load all the tests with the "priceCheck" id's to be invisible on load. I then want to be able to click each of the input buttons, depending on the star(onestarbtn, twostar...) and corresponding with the test number, to make the priceCheck's visible. I have an idea but havn't quite gotten to that part. I, however, cannot seam to get the tests to vanish on load. Any help would be greatly appreciated.

Add style="display:none" to all of them and set style to block when you want to show it. The problem seems a bit too straight forward, so maybe i did not fully understand.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM