我想要我的" detail ";按钮显示文本隐藏通过溢出，但我不知道如何访问它。我试图通过我的按钮的previousSibling和nextSibling访问它，但它不起作用。我也用querySelectorAll做过但它改变了我所有附加的& "而不是仅仅链接到按钮我点击
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>Overflow不是一个属性，它是一个样式。
您可以在第二次单击时通过检查if语句中元素的当前样式来恢复。
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>