यहां मैं जावास्क्रिप्ट की मदद से छवि स्रोत संपत्ति को बदलने की कोशिश कर रहा हूं लेकिन यह मेरे मामले में काम नहीं कर रहा है, मैं इसे कैसे बदल सकता हूं। कोई मुझे कोड में बदलाव का सुझाव देता है। तो यह मेरे मामले में काम कर सकता है।

यह HTML कोड को फ़ॉर्मेट करने के लिए CSS फ़ाइल है। यहां मैं इंटरनेट से दोनों लोगो का उपयोग कर रहा हूं। बैकग्राउंड और बैकग्राउंड को भी बदल दिया जाता है लेकिन इमेज को नहीं बदला जाता है।

      function hello() {
        console.log(document.getElementsByTagName("img").src);
        document.getElementsByTagName("img").src =
          "https://www.facebook.com/images/fb_icon_325x325.png";
        document.body.style.background = "red";
      }
h2 {
  text-align: center;
}
body {
  margin: auto;
  padding: 5px;
}
#maincontent {
  text-align: center;
}
.btn {
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="door.css" />
    <script src="main.js"></script>
    <title>Door</title>
  </head>
  <body>
    <h2 text-align="center">Open The Door</h2>
    <div id="maincontent">
      <img
        src="https://cfcdnpull-creativefreedoml.netdna-ssl.com/wp-content/uploads/2017/06/Twitter-logo-2012.png"
        id="hero"
        width="400px"
        height="600px"
      />
    </div>
    <div class="btn">
      <button id="workbtn" onclick="hello();">Open Door</button>
    </div>

  </body>
</html>
2
Shri Mali 24 मार्च 2020, 14:43

2 जवाब

इसके बजाय तत्व आईडी प्राप्त करें। document.getElementById("hero").src = "https://www.facebook.com/images/fb_icon_325x325.png"; इस तरह आप विशिष्ट हैं कि आप किस तत्व को प्राप्त करने का प्रयास कर रहे हैं। चूंकि आप एक टैग का उपयोग कर रहे हैं, इसलिए आपको यह निर्दिष्ट करना होगा कि आपको कौन सा टैग मिल रहा है। document.getElementsByTagName("img").item(0); या document.getElementsByTagName("img")[0] का उपयोग कर सकते हैं या अधिक विशिष्ट हो सकते हैं और इसे अपनी आईडी से प्राप्त कर सकते हैं।

[0] पृष्ठ पर टैग की पहली घटना है, कोड में आइटम की संख्यात्मक वृद्धि 0 से शुरू होती है, यदि दो थे, तो कुंजी [1] होगी।

h2 {
  text-align: center;
}
body {
  margin: auto;
  padding: 5px;
}
#maincontent {
  text-align: center;
}
.btn {
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="door.css" />
    <script src="main.js"></script>
    <title>Door</title>
  </head>
  <body>
    <h2 text-align="center">Open The Door</h2>
    <div id="maincontent">
      <img
        src="https://cfcdnpull-creativefreedoml.netdna-ssl.com/wp-content/uploads/2017/06/Twitter-logo-2012.png"
        id="hero"
        width="400px"
        height="600px"
      />
    </div>
    <div class="btn">
      <button id="workbtn" onclick="hello();">Open Door</button>
    </div>
    <script>
      function hello() {
        document.getElementById("hero").src =
          "https://www.facebook.com/images/fb_icon_325x325.png";
        document.body.style.background = "red";
      }
    </script>
  </body>
</html>
3
dale landry 24 मार्च 2020, 14:59
कृपया मेरे उत्तर की जाँच करें जहाँ आपको छवि तक पहुँचने के लिए विधि को बदलने की आवश्यकता नहीं है।
 – 
teddcp
24 मार्च 2020, 14:58

त्रुटि यह थी कि getelementsbyTagName एक HTMLCollection सूची देता है जो एक सरणी जैसी वस्तु है।

इस प्रकार यदि आप तत्व का उपयोग करना चाहते हैं, तो आपको arr[0] शैली का उपयोग करना होगा।

function hello() {
        console.log(document.getElementsByTagName("img")[0].src);
        document.getElementsByTagName("img")[0].src =
          "https://www.facebook.com/images/fb_icon_325x325.png";
        document.body.style.background = "red";
      }

कोड

      h2 {
        text-align: center;
      }
      body {
        margin: auto;
        padding: 5px;
      }
      #maincontent {
        text-align: center;
      }
      .btn {
        text-align: center;
      }
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="door.css" />
    <script src="main.js"></script>
    <title>Door</title>
  </head>

  <head>
   
  </head>

  <body>
    <h2 text-align="center">Open The Door</h2>
    <div id="maincontent">
      <img
        src="https://cfcdnpull-creativefreedoml.netdna-ssl.com/wp-content/uploads/2017/06/Twitter-logo-2012.png"
        id="hero"
        width="400px"
        height="600px"
      />
    </div>
    <div class="btn">
      <button id="workbtn" onclick="hello();">Open Door</button>
    </div>
    <script>
      function hello() {
        console.log(document.getElementsByTagName("img")[0].src);
        document.getElementsByTagName("img")[0].src =
          "https://www.facebook.com/images/fb_icon_325x325.png";
        document.body.style.background = "red";
      }
    </script>
  </body>
</html>
1
teddcp 24 मार्च 2020, 15:06