CODEWITHSUNDEEP
javascripthtmlcss
gsol
gsol

Reputation: 35

How can i change attributes of appended <p> throught appended <button>

i want my "detail" button to show the text hidden through overflow but i don't know how to access it. I tried to access it through previousSibling and nextSibling of my button but it doesn't work. I also did it with querySelectorAll but it changes all of my appended "p" instead of just the one linked to the button i click on

let add = document.getElementById("addNote");
let resultat = document.getElementById("result");
let y=1;
var addANote = function () {
    
    
    let contenu = document.getElementById("saisie").value;
    let resultat = document.getElementById("resultat");

    var newP = document.createElement("p");
    var newText1 = document.createTextNode(`Note ${y} \n ${contenu}`);
    newP.setAttribute("overflow", "hidden");
    var bouton = document.createElement('button');
    bouton.innerHTML ="Details";
    
    
    newP.appendChild(newText1);
    document.getElementById("result").appendChild(newP);
    document.getElementById("result").appendChild(bouton);
    bouton.addEventListener("click", function() {
        bouton.previousSibling.setAttribute("overflow", "visible");
    });
}

add.addEventListener("click", function() {
    
    addANote();
    y++;
})

add.onclick = function(event){    
event.preventDefault()    
};
#saisie {
    height : 250px;
    width: 75%;
}

p {
  white-space: nowrap; 
  width: 200px; 
  overflow: hidden;
  text-overflow: ellipsis;
}
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="popup.css">    
        <title>PopUp</title>
        <script src='popup.js' defer></script>
    </head>
    
<body>
<div id="content">
<form>
<h1> Note Taker</h1>
<h2>Add a new note:</h2>

<p>Note: </p>
<textarea type="text" id="saisie" name="saisie" required minlength ="1" maxlength ="3000" size ="500"></textarea>

</br>
</br>
<button type="submit" id="addNote"> Ajouter une Note </button>
</form>
<br>
<br>
<div class="autoShowHide" id="result"></div>
    
</div>
</body>
</html>

Upvotes: 0

Views: 38

Answers (1)

Barmar
Barmar

Reputation: 781834

Overflow isn't an attribute, it's a style.

You can revert on a second click by checking the current style of the element in an if statement.

let add = document.getElementById("addNote");
let resultat = document.getElementById("result");
let y = 1;
var addANote = function() {
  let contenu = document.getElementById("saisie").value;
  let resultat = document.getElementById("resultat");

  var newP = document.createElement("p");
  var newText1 = document.createTextNode(`Note ${y} \n ${contenu}`);
  newP.style.overflow = "hidden";
  var bouton = document.createElement('button');
  bouton.innerHTML = "Plus Details";


  newP.appendChild(newText1);
  document.getElementById("result").appendChild(newP);
  document.getElementById("result").appendChild(bouton);
  bouton.addEventListener("click", function() {
    let style = bouton.previousSibling.style;
    if (style.overflow == "visible") {
      style.overflow = "hidden";
      bouton.innerHTML = "Plus Details";
    } else {
      style.overflow = "visible";
      bouton.innerHTML = "Moin Details";
    }
  });
}

add.addEventListener("click", function(e) {
  e.preventDefault();
  addANote();
  y++;
})
#saisie {
  height: 250px;
  width: 75%;
}

p {
  white-space: nowrap;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
<html lang="en">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="popup.css">
  <title>PopUp</title>
  <script src='popup.js' defer></script>
</head>

<body>
  <div id="content">
    <form>
      <h1> Note Taker</h1>
      <h2>Add a new note:</h2>

      <p>Note: </p>
      <textarea type="text" id="saisie" name="saisie" required minlength="1" maxlength="3000" size="500"></textarea>

      </br>
      </br>
      <button type="submit" id="addNote"> Ajouter une Note </button>
    </form>
    <br>
    <br>
    <div class="autoShowHide" id="result"></div>

  </div>
</body>

</html>

Upvotes: 1

Related Questions