[英]Change a CSS display style in Javascript
I have a problem with a bit of my javascript code.我的 javascript 代码有一点问题。 I am trying to get my
#showAddress
to display: block
when the deliverservice
radio button is clicked/checked.我试图让我的
#showAddress
display: block
单击/选中deliverservice
单选按钮时阻止。 I've tried looking at some Stack Overflow posts but a lot of them are too advanced for my current level (I just started JavaScript).我尝试查看一些 Stack Overflow 帖子,但其中很多帖子对于我目前的水平来说太高级了(我刚开始使用 JavaScript)。
<label>Delivery Type</label>
<input type="radio" name="delivery" value="Pickup" id="pickupService">Pickup
<input type="radio" name="delivery" value="Deliver" id="deliverService">Deliver
</p>
<div id="showAddress">
<p>
<label for="deliveryAddress">Delivery Address</label><br>
<input type="text" name="deliveryAddress" id="deliveryAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="deliverySuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="deliveryPostcode" placeholder="Enter your postcode"><br>
<a href="#" id="sameAddress">Billing address same as Above</a>
</div>
<p>
<label for="billingAddress">Billing Address</label><br>
<input type="text" name="deliveryAddress" id="billingAddress" placeholder="Enter street number + name"><br>
<input type="text" name="deliverySuburb" id="billingSuburb" placeholder="Enter your [suburb], [state]"><br>
<input type="text" name="deliveryAddress" id="billingPostcode" placeholder="Enter your postcode"><br>
</p>
<p>
I believe the error is happening in my JavaScript, however it's only two functions.我相信错误发生在我的 JavaScript 中,但它只有两个功能。 The first two lines are my initialise function, which is calling my second function down below.
前两行是我的初始化 function,它在下面调用我的第二个 function。
var showDelivery = document.getElementById("deliverService");
showDelivery.onclick = showAddress;
function showAddress() {
document.getElementById("showAddress").style.display= 'block';
}
#additionalInformation, #showAddress {
display: none;
}
You should change this line你应该改变这一行
showDelivery.onclick = showAddress;
to something like this:像这样:
showDelivery.onclick = function(){showAddress();};
Alternatively, you can set the onclick
listener on the input element itself (in the html), to directly call the javascript function from the HTML element, rather than cluttering your JavaScript Alternatively, you can set the
onclick
listener on the input element itself (in the html), to directly call the javascript function from the HTML element, rather than cluttering your JavaScript
<input type="radio" name="delivery" value="Deliver" id="deliverService" onclick="showAddress()">Deliver
function showAddress() { document.getElementById("showAddress").style.display= 'block'; }
#additionalInformation, #showAddress { display: none; }
<label>Delivery Type</label> <input type="radio" name="delivery" value="Pickup" id="pickupService">Pickup <input type="radio" name="delivery" value="Deliver" id="deliverService" onclick="showAddress()">Deliver <div id="showAddress"> <p> <label for="deliveryAddress">Delivery Address</label><br> <input type="text" name="deliveryAddress" id="deliveryAddress" placeholder="Enter street number + name"><br> <input type="text" name="deliverySuburb" id="deliverySuburb" placeholder="Enter your [suburb], [state]"><br> <input type="text" name="deliveryAddress" id="deliveryPostcode" placeholder="Enter your postcode"><br> <a href="#" id="sameAddress">Billing address same as Above</a> </p> </div> <p> <label for="billingAddress">Billing Address</label><br> <input type="text" name="deliveryAddress" id="billingAddress" placeholder="Enter street number + name"><br> <input type="text" name="deliverySuburb" id="billingSuburb" placeholder="Enter your [suburb], [state]"><br> <input type="text" name="deliveryAddress" id="billingPostcode" placeholder="Enter your postcode"><br> </p>
EDIT: An example of using addEventListener
编辑:使用
addEventListener
的示例
document.getElementById("deliverService").addEventListener("click", function() {
document.getElementById("showAddress").style.display= 'block';
});
document.getElementById("deliverService").addEventListener("click", function() { document.getElementById("showAddress").style.display= 'block'; });
#additionalInformation, #showAddress { display: none; }
<label>Delivery Type</label> <input type="radio" name="delivery" value="Pickup" id="pickupService">Pickup <input type="radio" name="delivery" value="Deliver" id="deliverService">Deliver <div id="showAddress"> <p> <label for="deliveryAddress">Delivery Address</label><br> <input type="text" name="deliveryAddress" id="deliveryAddress" placeholder="Enter street number + name"><br> <input type="text" name="deliverySuburb" id="deliverySuburb" placeholder="Enter your [suburb], [state]"><br> <input type="text" name="deliveryAddress" id="deliveryPostcode" placeholder="Enter your postcode"><br> <a href="#" id="sameAddress">Billing address same as Above</a> </p> </div> <p> <label for="billingAddress">Billing Address</label><br> <input type="text" name="deliveryAddress" id="billingAddress" placeholder="Enter street number + name"><br> <input type="text" name="deliverySuburb" id="billingSuburb" placeholder="Enter your [suburb], [state]"><br> <input type="text" name="deliveryAddress" id="billingPostcode" placeholder="Enter your postcode"><br> </p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.