-1
\$\begingroup\$

absolute newbie here. I need help with simplifying my code. I want to create many more similar functions as shown below. Is there a simpler way where I can code without having to manually type in the same function every time I want to add a new function?

function toggleItem1() {

    var myItem1 = document.getElementById('item1Image');
    var displaySetting = myItem1.style.display;
    var item1Button = document.getElementById('item1Button');

    if (displaySetting == 'block') {
      myItem1.style.display = 'none';
      item1Button.innerHTML = 'Show item';
    } else {

      myItem1.style.display = 'block';
      item1Button.innerHTML = 'Hide item';
    }
  }


function toggleItem2() {

    var myItem2 = document.getElementById('item2Image');
    var displaySetting = myItem2.style.display;
    var item2Button = document.getElementById('item2Button');

    if (displaySetting == 'block') {
      myItem2.style.display = 'none';
      item2Button.innerHTML = 'Show item';
    } else {

      myItem2.style.display = 'block';
      item2Button.innerHTML = 'Hide item';
    }
  }
Improve this question
\$\endgroup\$
5
  • 3
    \$\begingroup\$ Welcome to Code Review! We need to know what the code is intended to achieve. To help reviewers give you better answers, please add sufficient context to your question, including a title that summarises the purpose of the code. We want to know why much more than how. The more you tell us about what your code is for, the easier it will be for reviewers to help you. The title needs an edit to simply state the task, rather than your concerns about the code. \$\endgroup\$ – Toby Speight Jan 18 at 15:22
  • \$\begingroup\$ Mini-review: Item1 andItem2 are not very descriptive identifiers; they should be made more meaningful. \$\endgroup\$ – Toby Speight Jan 18 at 15:23
  • \$\begingroup\$ @TobySpeight The code is obvious enough to provide sufficient context. \$\endgroup\$ – konijn Jan 18 at 16:06
  • 1
    \$\begingroup\$ @konjin, it includes nothing at all to indicate its purpose; it doesn't even include a document that contains item1Image, item1Button, item2Image and item2Button. \$\endgroup\$ – Toby Speight Jan 18 at 16:45
  • \$\begingroup\$ (Numbering named things is a code smell.) \$\endgroup\$ – greybeard Jan 19 at 10:24
1
\$\begingroup\$

Similar but different functions can be merged by using parameters.

function toggleItem(itemId, buttonId) {

    var item = document.getElementById(itemId);
    var displaySetting = item.style.display;
    var button = document.getElementById(buttonId);

    if (displaySetting == 'block') {
      item.style.display = 'none';
      button.innerHTML = 'Show item';
    } else {

      item.style.display = 'block';
      button.innerHTML = 'Hide item';
    }
  }

// usage
toggleItem('item1image', 'item1button')
Improve this answer
\$\endgroup\$
1
  • \$\begingroup\$ Thank you so much for the help, really appreciate it! :D \$\endgroup\$ – Cassie Bean Jan 18 at 23:34

Not the answer you're looking for? Browse other questions tagged or ask your own question.