给出一个值的 Onclick 事件处理程序 [JS]
Onclick eventhandler giving out a value [JS]
有什么样的可能性可以使 onclick 事件处理程序给出一个值(true,false),以便另一个函数可以使用它来做出逻辑决策(如果单击按钮则执行此操作,如果未单击则执行此操作) ...
我的代码:
function toggleBoolean(){
document.getElementById("click").onclick=function(){
return true;}
}
我已经为您创建了一个小示例(我希望)可以满足您的需求。
/**
* Performs an operation based on the provided parameter.
*/
function toggleBoolean(checked) {
// Find the div element in the DOM and exit if it can't be found.
const
statusIndicator = document.getElementById('theBoolean');
if (statusIndicator === null) {
return;
}
// When the checked parameter is true, add the is-active CSS class
// to the div element; otherwise remove the class.
if (checked){
statusIndicator.classList.add('is-active');
} else {
statusIndicator.classList.remove('is-active');
}
}
/**
* This method handles the event dispatched when the button to
* toggle the boolean is clicked.
*/
function onButtonClicked(event) {
// Call the method, pass the value true along to the method.
toggleBoolean(true);
}
// Get the element from the DOM.
const
button = document.getElementById('myButton');
// Make sure the element exists before assigning something
// to it or your code will crash.
if (button !== null) {
// Add an event listener for the click event.
button.addEventListener('click', onButtonClicked);
}
// Set the boolean value to false.
toggleBoolean(false);
.status-indicator {
background-color: red;
height: 40px;
margin-top: 10px;
width: 40px;
}
.status-indicator.is-active {
background-color: blue;
}
<button id="myButton" type="button">Click me</button>
<div id="theBoolean" class="status-indicator"></div>
有什么样的可能性可以使 onclick 事件处理程序给出一个值(true,false),以便另一个函数可以使用它来做出逻辑决策(如果单击按钮则执行此操作,如果未单击则执行此操作) ...
我的代码:
function toggleBoolean(){
document.getElementById("click").onclick=function(){
return true;}
}
我已经为您创建了一个小示例(我希望)可以满足您的需求。
/**
* Performs an operation based on the provided parameter.
*/
function toggleBoolean(checked) {
// Find the div element in the DOM and exit if it can't be found.
const
statusIndicator = document.getElementById('theBoolean');
if (statusIndicator === null) {
return;
}
// When the checked parameter is true, add the is-active CSS class
// to the div element; otherwise remove the class.
if (checked){
statusIndicator.classList.add('is-active');
} else {
statusIndicator.classList.remove('is-active');
}
}
/**
* This method handles the event dispatched when the button to
* toggle the boolean is clicked.
*/
function onButtonClicked(event) {
// Call the method, pass the value true along to the method.
toggleBoolean(true);
}
// Get the element from the DOM.
const
button = document.getElementById('myButton');
// Make sure the element exists before assigning something
// to it or your code will crash.
if (button !== null) {
// Add an event listener for the click event.
button.addEventListener('click', onButtonClicked);
}
// Set the boolean value to false.
toggleBoolean(false);
.status-indicator {
background-color: red;
height: 40px;
margin-top: 10px;
width: 40px;
}
.status-indicator.is-active {
background-color: blue;
}
<button id="myButton" type="button">Click me</button>
<div id="theBoolean" class="status-indicator"></div>