CODEWITHSUNDEEP
javascripthtmlfunctionbuttonnested
user12315537
user12315537

Reputation:

how to call two functions with a single button

I tried to change image and text with javascript button. I can change either image or text at one time BUT NOT THE BOTH. please help.

This is what I tried

function myFunction(name) {
  document.getElementById("2").innerHTML = "SDMC " + name;
}
<html>
<body>
  <img class="img-1006" id="1" src="https://2.bp.blogspot.com/-lsb_v-7rE5c/XaSceQO2x9I/AAAAAAAAO5w/W-3M-Ccg6RYq73bBV7ihp7OdYzkNrIPmwCLcBGAsYHQ/s320/images%2B%25281%2529.png" style="height: 500px;" />
  <h1 class="textblock-4" id="2"> MEMBER</h1>
  <button class="btn-1" onclick="document.getElementById('1').src='https://2.bp.blogspot.com/-lsb_v-7rE5c/XaSceQO2x9I/AAAAAAAAO5w/W-3M-Ccg6RYq73bBV7ihp7OdYzkNrIPmwCLcBGAsYHQ/s320/images%2B%25281%2529.png' ">gggggggg </button> <button class="btn-1" onclick="myFunction('kkkkkkkkkk')">gggggggg </button>

  <button class="btn-2" onclick="document.getElementById('1').src='https://1.bp.blogspot.com/-XvSuPCgIHrc/Xb67ueOGjeI/AAAAAAAAPL8/T4F2rs5nIkA1A_UIi7oBCvevmIl0g5pVQCLcBGAsYHQ/s1600/download.jpg'">computer</button> <button class="btn-2" onclick="myFunction('yyyyyyyyy')">computer</button>
</body>
</html>

Upvotes: 0

Views: 339

Answers (2)

Andy
Andy

Reputation: 63587

Calling two functions is simply a matter of using a semi-colon to separate them. For example:

function myFunction() {
  setImage();
  setCaption();
}

In your case this is slightly more difficult as you're updating an image and need to store that src image URI and caption somewhere.

Ideally you want to start thinking about separating your inline JS and HTML. Separation of concerns is useful because it makes writing, understanding, and maintaining code much easier.

In this example I've separated out the JS from the HTML making the markup easier to read. There is a container (where the updated image and caption will go), and a couple of buttons identified by an id in the data attribute (I've called them 'computer' and 'member' for convenience).

The image and caption information is now stored in a JS object called dict. It contains two objects identified by key ('computer' and 'member') which contain the corresponding data.

The elements are cached, and the buttons given click listeners. When they are clicked they call the swap function.

swap grabs the id from the clicked button and calls getHTML with it to get the right container HTML from the dictionary object. The HTML is returned as a string and the container HTML is updated with it.

// The dictionary is an object that contains
// objects for each img/caption type
const dict = {
  member: {
    img: 'https://2.bp.blogspot.com/-lsb_v-7rE5c/XaSceQO2x9I/AAAAAAAAO5w/W-3M-Ccg6RYq73bBV7ihp7OdYzkNrIPmwCLcBGAsYHQ/s320/images%2B%25281%2529.png',
    caption: 'kkkkkkkkk'
  },
  computer: {
    img: 'https://1.bp.blogspot.com/-XvSuPCgIHrc/Xb67ueOGjeI/AAAAAAAAPL8/T4F2rs5nIkA1A_UIi7oBCvevmIl0g5pVQCLcBGAsYHQ/s1600/download.jpg',
    caption: 'yyyyyyyyy'
  }
};

// Cache the container and buttons
const container = document.querySelector('.container');
const buttons = document.querySelectorAll('.button');

// Add click listeners to the buttons
buttons.forEach(button => button.addEventListener('click', swap, false));

// Grabs the img and caption information from the
// dictionary using the id, and return a template literal
// describing the HTML you want to display
function getHTML(id) {
  const { [id]: { img, caption } } = dict;
  return `<img src="${img}" /><h3>SDMC ${caption}</h3>`;
}

// Grab the id from the element and set the container
// HTML to the returned HTML string from `getHTML` 
function swap() {
  const { dataset: { id } } = this;
  container.innerHTML = getHTML(id);
}
.container { margin-top: 1em; }
<html>
<body>
  <button class="button" data-id="member">Member</button>
  <button class="button" data-id="computer">Computer</button>
  <div class="container"></div>
</body>
</html>

Further reading

Upvotes: 1

Rena
Rena

Reputation: 81

On your onclick add as many function calls as you want, with ";" between calls. just as if you were writing a code calling functions one after another

 
function myFunction(name)
{
document.getElementById("2").innerHTML = "SDMC " + name;
}
 
<html>
<body>
  <img class="img-1006" id="1" src="https://2.bp.blogspot.com/-lsb_v-7rE5c/XaSceQO2x9I/AAAAAAAAO5w/W-3M-Ccg6RYq73bBV7ihp7OdYzkNrIPmwCLcBGAsYHQ/s320/images%2B%25281%2529.png" style="height: 500px;" /> 
  <h1 class="textblock-4" id="2"> MEMBER</h1>
  <button class="btn-1" onclick="document.getElementById('1').src='https://2.bp.blogspot.com/-lsb_v-7rE5c/XaSceQO2x9I/AAAAAAAAO5w/W-3M-Ccg6RYq73bBV7ihp7OdYzkNrIPmwCLcBGAsYHQ/s320/images%2B%25281%2529.png'; myFunction('kkkkkkkkkk') ">gggggggg </button> 
  

  <button class="btn-2" onclick="document.getElementById('1').src='https://1.bp.blogspot.com/-XvSuPCgIHrc/Xb67ueOGjeI/AAAAAAAAPL8/T4F2rs5nIkA1A_UIi7oBCvevmIl0g5pVQCLcBGAsYHQ/s1600/download.jpg';myFunction('yyyyyyyyy') ">computer</button> 
 
</body>
</html>

Upvotes: 0

Related Questions