J'ai essayé de changer l'image et le texte avec le bouton javascript. Je peux changer l'image ou le texte à la fois MAIS PAS LES DEUX. veuillez aider.

C'est ce que j'ai essayé

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>
0
user12315537 3 nov. 2019 à 15:12

2 réponses

Sur votre onclick, ajoutez autant d'appels de fonction que vous le souhaitez, avec ";" entre les appels. comme si vous écriviez un code appelant les fonctions les unes après les autres

 
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>
0
Rena 3 nov. 2019 à 12:20

L'appel de deux fonctions consiste simplement à utiliser un point-virgule pour les séparer. Par exemple:

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

Dans votre cas, cela est légèrement plus difficile car vous mettez à jour une image et devez stocker l'URI et la légende de l'image src quelque part.

Idéalement, vous voulez commencer à penser à séparer votre JS et HTML en ligne. Séparation des préoccupations est utile car il facilite l'écriture, la compréhension et la maintenance du code.

Dans cet exemple, j'ai séparé le JS du HTML, ce qui facilite la lecture du balisage. Il y a un conteneur (où l'image et la légende mises à jour iront), et quelques boutons identifiés par un identifiant dans l'attribut de données (je les ai appelés 'ordinateur' et 'membre' pour plus de commodité).

Les informations d'image et de légende sont désormais stockées dans un objet JS appelé dict. Il contient deux objets identifiés par clé («ordinateur» et «membre») qui contiennent les données correspondantes.

Les éléments sont mis en cache et les boutons sont attribués aux écouteurs de clic. Quand on clique dessus, ils appellent la fonction swap.

swap saisit l'identifiant du bouton cliqué et appelle getHTML avec lui pour obtenir le bon conteneur HTML à partir de l'objet dictionnaire. Le HTML est renvoyé sous forme de chaîne et le HTML du conteneur est mis à jour avec.

// 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>
1
Andy 3 nov. 2019 à 14:27