Jaydon Loar Jaydon Loar - 2 months ago 7
HTML Question

The first buttons work, the second do not

The first section works. When i press +, it works. Nothing works after the +. I press the plus and the second set of buttons appear, but pressing them does nothing. By the way, I am making a calculator.

<html>
<head>
<title>
JavaScript
</title>
</head>
<body>
<script>
var first = ""
document.write('<button onclick="one()">1</button>');
document.write('<button onclick="two()">2</button><br/>');
document.write('<button onclick="three()">3</button>');
document.write('<button onclick="four()">4</button><br/>');
document.write('<button onclick="five()">5</button>');
document.write('<button onclick="six()">6</button><br/>');
document.write('<button onclick="seven()">7</button>');
document.write('<button onclick="eight()">8</button><br/>');
document.write('<button onclick="nine()">9</button>');
document.write('<button onclick="zero()">0</button><br/>');
document.write('<button onclick="add()">+</button><br/>');
function one(){
first = first + "1";
}
function two(){
first = first + "2";
}
function three(){
first = first + "3";
}
function four(){
first = first + "4";
}
function five(){
first = first + "5";
}
function six(){
first = first + "6";
}
function seven(){
first = first + "7";
}
function eight(){
first = first + "8";
}
function nine(){
first = first + "9";
}
function zero(){
first = first + "0";
}
function add(){
document.body.innerHTML = '';
var second = ""
document.write('<button onclick="one()">1</button>');
document.write('<button onclick="two()">2</button><br/>');
document.write('<button onclick="three()">3</button>');
document.write('<button onclick="four()">4</button><br/>');
document.write('<button onclick="five()">5</button>');
document.write('<button onclick="six()">6</button><br/>');
document.write('<button onclick="seven()">7</button>');
document.write('<button onclick="eight()">8</button><br/>');
document.write('<button onclick="nine()">9</button>');
document.write('<button onclick="zero()">0</button><br/>');
document.write('<button onclick="equal()">=</button><br/>');
function one(){
second = second + "1";
}
function two(){
second = second + "2";
}
function three(){
second = second + "3";
}
function four(){
second = second + "4";
}
function five(){
second = second + "5";
}
function six(){
second = second + "6";
}
function seven(){
second = second + "7";
}
function eight(){
second = second + "8";
}
function nine(){
second = second + "9";
}
function zero(){
second = second + "0";
}
function equal(){
first = Math.floor;
second = Math.floor;
answer = first + second;
document.write(answer);
}
}
</script>
</body>
</html>

Answer

The issue you had with your original solution was that the functions in the second calculator were in the private scope of the add() function, but the HTML are in the global scope, so there was no way for them to access the functions to add numbers to your 'second' variable.

Here's your code, with both sets of function in the global scope

<html>
<head>
<title>
JavaScript
</title>
</head>
<body>
<script>

first = ""
document.write('<button onclick="first_one()">1</button>');
document.write('<button onclick="first_two()">2</button>');
document.write('<button onclick="first_three()">3</button>');
document.write('<button onclick="first_four()">4</button>');
document.write('<button onclick="first_five()">5</button>');
document.write('<button onclick="first_six()">6</button>');
document.write('<button onclick="first_seven()">7</button>');
document.write('<button onclick="first_eight()">8</button>');
document.write('<button onclick="first_nine()">9</button>');
document.write('<button onclick="first_zero()">0</button>');
document.write('<button onclick="first_add()">+</button>');

function first_one(){
first = first + "1";
}
function first_two(){
first = first + "2";
}
function first_three(){
first = first + "3";
}
function first_four(){
first = first + "4";
}
function first_five(){
first = first + "5";
}
function first_six(){
first = first + "6";
}
function first_seven(){
first = first + "7";
}
function first_eight(){
first = first + "8";
}
function first_nine(){
first = first + "9";
}
function first_zero(){
first = first + "0";
}

function first_add() {

second = ""

document.write('<button onclick="second_one()">1</button>');
document.write('<button onclick="second_two()">2</button><br/>');
document.write('<button onclick="second_three()">3</button>');
document.write('<button onclick="second_four()">4</button><br/>');
document.write('<button onclick="second_five()">5</button>');
document.write('<button onclick="second_six()">6</button><br/>');
document.write('<button onclick="second_seven()">7</button>');
document.write('<button onclick="second_eight()">8</button><br/>');
document.write('<button onclick="second_nine()">9</button>');
document.write('<button onclick="second_zero()">0</button><br/>');
document.write('<button onclick="second_equal()">=</button><br/>');

}

function second_one(){
second = second + "1";
}
function second_two(){
second = second + "2";
}
function second_three(){
second = second + "3";
}
function second_four(){
second = second + "4";
}
function second_five(){
second = second + "5";
}
function second_six(){
second = second + "6";
}
function second_seven(){
second = second + "7";
}
function second_eight(){
second = second + "8";
}
function second_nine(){
second = second + "9";
}
function second_zero(){
second = second + "0";
}

function second_equal(){
document.write((parseInt(first) + parseInt(second)).toString());
}
</script>
</body>
</html>