Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Jeremy Bray
Jeremy Bray
Courses Plus Student 11,927 Points

How can I shorten this code, or even make it better?

I'm fairly new to programming, so I'm just trying to test my skills, but I'm stuck on something. I was wondering how I could shorten this code, or even improve it:

function display_1() {
    var set_display_to_object = document.getElementById('result_display');
    set_display_to_object.value = 1;
};

function  display_2() {
    var set_diplay_to_object = document.getElementById('result_display');
    set_diplay_to_object.value = 2;
};

function  display_3() {
    var set_diplay_to_object = document.getElementById('result_display');
    set_diplay_to_object.value = 3;
};

function  display_4() {
    var set_diplay_to_object = document.getElementById('result_display');
    set_diplay_to_object.value = 4;
};

function  display_5() {
    var set_diplay_to_object = document.getElementById('result_display');
    set_diplay_to_object.value = 5;
};

function  display_6() {
    var set_diplay_to_object = document.getElementById('result_display');
    set_diplay_to_object.value = 6;
};

function  display_7() {
    var set_diplay_to_object = document.getElementById('result_display');
    set_diplay_to_object.value = 7;
};

function  display_8() {
    var set_diplay_to_object = document.getElementById('result_display');
    set_diplay_to_object.value = 8;
};

function  display_9() {
    var set_diplay_to_object = document.getElementById('result_display');
    set_diplay_to_object.value = 9;
};

function display_0() {
    var set_diplay_to_object = document.getElementById('result_display');
    set_diplay_to_object.value = 0;
};

I have all of these functions being called when I press an input button in an html document. When pressed, the button changes the value an input text field I have, with the id "result_display". I have a value set to each button coordinated to the number it is representing. How can I have my function call that value instead, so that I could have all of my button call on the same function, which would print the value of the button? Also, unfortunately, these functions change the value every time I press another button, resulting in a limitation to one figure numbers. How could I change it to where it adds the selected number onto the end of the value, instead of change it?

( In short, I'm trying to create a calculator using javascript and html. )

2 Answers

Crisoforo Gaspar Hernández
Crisoforo Gaspar Hernández
18,302 Points
Crisoforo Gaspar Hernández
Crisoforo Gaspar Hernández
18,302 Points

I think this could be work for you

function display(number){
    document.getElementById("result_display").value = number;
}

And you should use like this:

display(9);

For number 9, for example.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

You aren't thinking algorithmically, you to think about the general case and how to solve similar issues using functions instead of writing code procedurally using functions.

I'd suggest you check out codehs which is great at teaching algorithmic thinking.

After that I'd suggest you head over to Learn Street for a JavaScript refresher course and finally wrap up with the JavaScript exercises on pairuptocode.com.