Reputation: 103
These two statements are identical, I want to make one statement that is equivalent to them.
In other words I want to make a shortcut of these codes as one function.
function chose1() {
if (document.getElementById("Button1").click = true) {
if (document.getElementById('Button1').value == "") {
document.getElementById('Button1').value += nextTurn;
document.getElementById('Button1').style.fontSize = "30px";
document.getElementById('Button1').style.color = 'Blue';
if (document.getElementById('Button1').value == "O") {
document.getElementById('Button1').style.color = 'Red'
}
changeTurn();
}
}
}
function chose2() {
if (document.getElementById("Button2").click = true) {
if (document.getElementById('Button2').value == "") {
document.getElementById('Button2').value += nextTurn;
document.getElementById('Button2').style.fontSize = "30px";
document.getElementById('Button2').style.color = 'Blue';
if (document.getElementById('Button2').value == "O") {
document.getElementById('Button2').style.color = 'Red'
}
changeTurn();
}
}
}
Upvotes: 1
Views: 249
Reputation: 9156
function chose(id) {
var btn = document.getElementById(id)
if (btn.click = true) {
if (btn.value == "") {
btn.value += nextTurn;
btn.style.fontSize = "30px";
btn.style.color = 'Blue';
if (btn.value == "O") {
btn.style.color = 'Red'
}
changeTurn();
}
}
chose("Button1");
chose("Button2");
This is the solution , not only for joinig two functions into two but look at how many times in one function you are accessing the dom element like document.getElementById()
, its leads to performance degrade.
Store the reference in a variable and reuse it. like
var btn = document.getElementById(id)
Upvotes: 3
Reputation: 1146
You can refactor into a single method that accepts what is variable (the button id). And i suggestion i give to you, which will give you a better organization and performance is to assign a variable with the result of the: document.getElementById(button_id), instead of on each line making this evaluation you can put on a variable.
function _buttonChoser(button_id) {
var button_element = document.getElementById(button_id);
if (button_element.click = true) {
if (button_element.value == "") {
button_element.value += nextTurn;
button_element.style.fontSize = "30px";
button_element.style.color = 'Blue';
if (button_element.value == "O") {
button_element.style.color = 'Red'
}
changeTurn();
}
}
};
function chose1() {
_buttonChoser('Button1')
};
function chose2() {
_buttonChoser('Button2')
};
Upvotes: 0
Reputation: 16775
It's called Refactoring
. This world have many good books about it.
You can do:
function chose(button) {
clickedButton = document.getElementById(button);
if (clickedButton.click = true) {
if (clickedButton.value == "") {
clickedButton.value += nextTurn;
clickedButton.style.fontSize = "30px";
clickedButton.style.color = 'Blue';
if (clickedButton.value == "O") {
clickedButton.style.color = 'Red'
}
changeTurn();
}
}
}
Upvotes: 0
Reputation: 6147
function chose( id ) { }
Then you use id
instead of "Button1" or "Button2" ; have you searched before asking ?...
Upvotes: 2