2015-04-22 6 views
7

मैं 3 बटन बनाने के लिए कोशिश कर रहा हूँ, और जावास्क्रिप्ट का उपयोग कर, बटन 1 तो क्लिक किया यह परिवर्तन "एक बटन पर क्लिक करें" पाठजावास्क्रिप्ट - प्रत्येक बटन पर परिवर्तन पैरा पाठ क्लिक करें

"आप बटन 1 दबाया" करने के लिए किया जाता है तो बटन 2 और 3 के लिए वही! और यदि बटन 3 दबाया जाता है, तो पाठ रंग ग्रीन

में बदल जाता है, हालांकि, मुझे यह काम करने के लिए प्रतीत नहीं होता है! किसी भी मदद

सराहना की जाएगी यहाँ मेरी वर्तमान कोड है:

<!DOCTYPE html> 

<html> 
    <head> 
     <title>Button</title> 
    </head> 
    <body> 

     <script type="text/javascript"> 
      function changeText() { 

       var b1 = document.getElementById('b1'); 
       var b2 = document.getElementById('b2'); 
       var b3 = document.getElementById('b3'); 

       if(b1.onclick="changeText();") { 
        document.getElementById('pText').innerHTML = "You pressed button 1"; 
       } 

       if(b2.onlick="changeText();") { 
        document.getElementById('pText').innerHTML = "You pressed Button 2"; 
       } 

      } 


     </script> 

     <input type="button" value="Button 1" id="b1" onclick="changeText();"/> 
     <input type="button" value="Button 2" id="b2" onclick="changeText();"/> 
     <input type="button" value="Button 3" id="b3" onclick="changeText();"/> 

     <p id="pText">Click on a Button</p> 
    </body> 
</html> 

उत्तर

0

आप निकट पहुंच गए हैं, लेकिन कोई सिगार।

आपके द्वारा क्लिक किए जा रहे बटन को सही ढंग से पहचानने के लिए आपको अपने फ़ंक्शन कॉल के साथ this में भेजना चाहिए, इस तरह आप उस ऑब्जेक्ट का संदर्भ प्राप्त कर सकते हैं जिस पर क्लिक किया गया था। यदि किसी कथन में onclick की तुलना अच्छी तरह से काम नहीं करेगी, क्योंकि यह एक फ़ंक्शन पॉइंटर है, स्ट्रिंग नहीं।

<input type="button" value="Button 1" id="b1" onclick="changeText(this);"/> 

और इस तरह अपने changeText() कुछ अब किया जाना चाहिए: की तरह

कोशिश कुछ। आप इस उदाहरण का उपयोग कर सकते हैं, लेकिन आपको बाकी को अपने आप को समझना होगा। हालांकि आपको सही दिशा में इंगित करना चाहिए।

function changeText(elementClicked) { 
    var button1 = document.getElementById('b1'); 
    if (elementClicked == button1) { 
    // button 1 was clicked 
    } 
} 
10

आप इस कोशिश कर सकते हैं:

<!DOCTYPE html> 

<html> 
    <head> 
     <title>Button</title> 
    </head> 
    <body> 

     <script type="text/javascript"> 
      function changeText(value) { 
       document.getElementById('pText').innerHTML = "You pressed " + value; 
      } 
     </script> 

     <input type="button" value="Button 1" id="b1" onclick="changeText(this.value);"/> 
     <input type="button" value="Button 2" id="b2" onclick="changeText(this.value);"/> 
     <input type="button" value="Button 3" id="b3" onclick="changeText(this.value);"/> 

     <p id="pText">Click on a Button</p> 
    </body> 
</html> 

यहाँ आप क्या कर रहे हैं जब भी आप बटन क्लिक करें, onlick(); समारोह बटन तत्व तुम सिर्फ क्लिक किया के मान से युक्त कहा जाता है की जा रही है। सभी changeText(); फ़ंक्शन को अब उस तत्व के आंतरिक HTML को संपादित करना है जिसे आप संपादित करना चाहते हैं। सीधे।

उम्मीद है कि इससे मदद मिलती है।

UPDATED कोड: (अपने अपडेट किए गए पैरामीटर प्रतिबिंबित करने के लिए)

<!DOCTYPE html> 

<html> 
    <head> 
     <title>Button</title> 
    </head> 
    <body> 

     <script type="text/javascript"> 
      function changeText(value) { 
       document.getElementById('pText').innerHTML = "You pressed " + value; 
       if(value == "Button 3") 
       { 
        document.getElementById('pText').setAttribute('style', 'color: green');} 
       } 
     </script> 

     <input type="button" value="Button 1" id="b1" onclick="changeText(this.value);"/> 
     <input type="button" value="Button 2" id="b2" onclick="changeText(this.value);"/> 
     <input type="button" value="Button 3" id="b3" onclick="changeText(this.value);"/> 

     <p id="pText">Click on a Button</p> 
    </body> 
</html> 
+0

यदि बटन 3 दबाया जाता है तो मैं पाठ के रंग को ग्रीन में बदलने की भी कोशिश कर रहा हूं - – GDesigns

+0

से ऊपर उल्लेख करना भूल गया है ठीक है। आप एक आईएफ स्टेटमेंट को शामिल करने के लिए इसे बढ़ाकर अपने कार्य को संपादित कर सकते हैं। 'if (value == 'बटन 3') {/ * रंग बदलने के लिए कोड यहां जाता है * /} 'आप शैली विशेषता को' pText' तत्व में जोड़कर और वहां अपना सीएसएस कोड डालने के द्वारा ऐसा कर सकते हैं। 'style = 'color: green''etc उम्मीद है कि यह मदद करता है: डी – shadoweye14

+0

कोड अपडेट किया गया :) – shadoweye14

0

इस प्रयास करें:

<html> 
    <head> 
     <title>Button</title> 
    </head> 
    <body> 

     <script type="text/javascript"> 
      function changeText(text) { 
       document.getElementById('pText').innerHTML=text; 

      } 


     </script> 

     <input type="button" value="Button 1" id="b1" onclick="changeText('You pressed Button 1');"/> 
     <input type="button" value="Button 2" id="b2" onclick="changeText('You pressed Button 2');"/> 
     <input type="button" value="Button 3" id="b3" onclick="changeText('You pressed Button 3');"/> 

     <p id="pText">Click on a Button</p> 
    </body> 
</html> 
1

आपका कोड एकदम सही है। लेकिन समस्या यह है कि यदि लूप दोनों अनुक्रमिक रूप से इतनी तेजी से निष्पादित कर रहे हैं कि आप तब नहीं देख सकते जब पहला टेक्स्ट दूसरे पाठ में परिवर्तित हो जाता है। दो कॉल के बीच अलर्ट डालने का प्रयास करें।

संबंधित मुद्दे