जब छवि पर क्लिक किया जाता है तो कोड के इस टुकड़े को एक पैराग्राफ में टेक्स्ट को बदलना चाहिए। हालांकि, ऑनक्लिक फ़ंक्शन काम नहीं करता है और टेक्स्ट वही रहता है। कृपया कोड देखें:

एचटीएमएल:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="js/script.js"></script>

</head>
<body>

<main class="tvfull">
    <p id="text"> myname </p>

    <section class="tv">
        <img class="tv" src="img/television.png">
    </section>
</main>

<main class="remote">
 
    <section class="remote">
        <img class="remote" src="img/remote_base.png">
    </section>

    <section class="buttons">
            <img  src="img/button_me.png" onclick="change()" id="me">
            
    </section>
</main>


</body>
</html>

जेएस:

// check if page is fully loaded
window.onload = function() {

}
function change(){
    document.getElementById("text").innerHTML = "You clicked the button";
}
0
iqra abbasi 8 जिंदा 2021, 22:11

3 जवाब

सबसे बढ़िया उत्तर
<main class="tvfull">
    <p id="text"> to be changed </p>

</main>

<section class="buttons">
            <img id="me" src="https://images.pexels.com/photos/3804997/pexels-photo-3804997.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" onclick="change()">
    </section>
    
<script>
  function change() {
    document.getElementById("text").innerHTML = "text changed!"
  }  
</script>

क्या आप पूर्ण स्रोत कोड साझा कर सकते हैं? मैंने कोशिश की और यह ठीक काम किया। क्या आपने अपने JavaScript फ़ंक्शन को स्क्रिप्ट टैग में लपेटा है?

1
niklhs 8 जिंदा 2021, 22:15

छवि के बाहर एक div जोड़ने का प्रयास करें और उस पर ऑनक्लिक को इस तरह ले जाएं:

<section class="buttons">
            <div onclick="change()"><img id="me" src="img/button_me.png"></div>
</section>

हालांकि इसे आईएमजी पर भी ठीक काम करना चाहिए

0
DenisDaniel707 8 जिंदा 2021, 22:18

आपका कोड काम कर रहा है।

यह बदलने के बारे में सोचने लायक हो सकता है कि आप ईवेंट को कैसे ट्रिगर कर रहे हैं, इनलाइन onclick ईवेंट को ट्रैक करना कठिन हो सकता है। आप संदर्भ $("img#me") का उपयोग करके छवि टैग में click ईवेंट जोड़ने के लिए jquery का उपयोग कर सकते हैं (यह एक आईडी me के साथ सभी img टैग ढूंढता है, जिसका असर होता है दिमाग में आईडी अद्वितीय होनी चाहिए ताकि आप केवल $("#me")) का उपयोग कर सकें।

आप उसी तरह से बदलने के लिए पैराग्राफ का चयन भी कर सकते हैं, चयनकर्ता $("#text") और फिर फ़ंक्शन .text() का उपयोग करके उसके भीतर के टेक्स्ट को बदलने के लिए या .html() यदि आपको उस कार्यात्मकता की आवश्यकता है।

मैंने उत्तर के प्रयोजनों के लिए प्लेसहोल्डर छवि के लिंक का भी उपयोग किया है।


// Attach click event to 'img' tag with id 'me'
$("img#me").click(function() {

  // Change text
  $("#text").text("You clicked the button");
  // Or you can use the following if you need to add HTML:
  //$("#text").html("You clicked the button");

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<main class="tvfull">
  <p id="text"> to be changed</p>
</main>

<section class="buttons">
  <img id="me" src="https://via.placeholder.com/150">
</section>
0
Oliver Trampleasure 8 जिंदा 2021, 22:31