मेरे पास एक प्रोफाइल पेज है और एक एडिट बटन है। जब मैं संपादन बटन पर क्लिक करता हूं तो आप पृष्ठ पर जानकारी संपादित कर सकते हैं।

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

```const editButton = document.querySelector('.edit-btn');
const doneButton = document.querySelector(".done-btn");
const textBox = document.querySelector('.txt-box');
const textArea = document.querySelector('.description');
const pwbox = document.querySelector('.pw-box');
const dateBox = document.querySelector(".date-joined");```
editButton.addEventListener('click', e => {
  textBox.removeAttribute('readonly');
  textArea.removeAttribute('readonly');
  textBox.style.borderBottom = '1px gray solid';
  pwbox.style.display = "flex";
  doneButton.style.display = "block";
  editButton.style.display = 'none';
  dateBox.style.display = "none";
});

doneButton.addEventListener('click', e => {
  textBox.setAttribute("readonly");
  textBox.style.removeProperty('background color');
  textBox.style.removeProperty('border-bottom');
  pwbox.style.display = "none";
  doneButton.style.display = "none";
  editButton.style.display = 'block';
  dateBox.style.display = "flex";
});
<div class="infobox">
  <input type="text" name="uname" class="uname txt-box" value="<?php echo $usersName ?>" readonly autocomplete="off">
  <input type="text" name="email" class='email' value="<?php echo $usersEmail ?>" readonly>
  <div class="pw-box">
    <label for="password">Password</label>
    <input type="password" name="password" class="password">
    <label for="confirmPassword">Confirm Password</label>
    <input type="password" name="conf-password" class="conf-password">
  </div>
  <div class=" date-joined">
    <small>Date Joined</small>
    <div>01/01/01</div>
  </div>

</div>
<div class="description-box">

  <textarea name="description" class="description" cols="30" rows="10" placeholder="Let me describe you!" readonly></textarea>
  <button class='edit-btn'>Edit</button>
  <button class="done-btn">Done</button>

</div>
0
Joroi 26 जिंदा 2022, 18:52
1
कंसोल कहता है Uncaught ReferenceError: editButton is not defined
 – 
Jeremy Thille
26 जिंदा 2022, 18:56
हालांकि यह एक वैध दृष्टिकोण है, मैं आपको सुझाव दूंगा कि आप एक वर्ग को मूल तत्व में जोड़ने/निकालने पर विचार करें, और जेएस में प्रत्येक को संशोधित करने के बजाय सीएसएस का उपयोग करके सभी प्रासंगिक इनपुट छुपाएं/दिखाएं। यह बहुत कम त्रुटि प्रवण है और आपकी शैलियों को एक ही स्थान पर रखता है।
 – 
DBS
26 जिंदा 2022, 18:59
2
- कोड को न्यूनतम प्रतिलिपि प्रस्तुत करने योग्य उदाहरण बनाने के लिए प्रश्न संपादित करें। टिप्पणियों में कोड का एक गुच्छा डंप न करें।
 – 
Quentin
26 जिंदा 2022, 19:00

3 जवाब

किसी ईवेंट श्रोता का उपयोग करने के बजाय, आप शायद इसका उपयोग कर सकते हैं और <input type="button" class="button" onclick="editFunction()" value="Edit" /> बटन पर क्लिक करने पर फ़ंक्शन को कॉल कर सकते हैं

0
DarthEggo 26 जिंदा 2022, 19:18

समस्या मेरी जेएस फ़ाइल में .setAttribute है, इसे एक के बजाय 2 पैरामीटर चाहिए। मदद करने के लिए धन्यवाद।

0
Joroi 26 जिंदा 2022, 19:55

आपको केवल पढ़ने योग्य विशेषता को सत्य पर सेट करना चाहिए

textBox.setAttribute("readonly", true);
0
Albi Çenga 26 जिंदा 2022, 22:14