How can I hide this button onclick with javascript?-CodePudding

Here's my javascript code for a "see more" button. How can I also make it disappear on click?

    function myFunction() {
  var x = document.getElementById("dsec");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "block";
     }
  }
</script>

CodePudding user response：

You will need to give your button an Id and do the same thing you are doing for your description block.

ie:

function myFunction() {
  var x = document.getElementById("dsec");
  var btn= document.getElementById("btn");
  if (x.style.display === "none") {
    x.style.display = "block";
    btn.style.display = "none";
  } else {
    x.style.display = "none";
    btn.style.display = "block";
     }
  }
</script>

... or similar. I'm not entirely sure what is triggering your 'myFunction' or your references... but the concept is there.

In the future, it'd be worthwhile to add a little more context and spell-check your code to make it easier to help.

I will also note @Scott Marcus suggestion of using actual styles instead of inlining stuff is the better overall technique.

CodePudding user response：

Please check your button id and your selectors just to make sure its correct, anyway here's a working code. If you need to hide the button in simple way, just set its display value to None. It's like changing the css value of display but you are just using javascript. The other option you can use is by removing it from the DOM i believe.

function myFunction() {
  var x = document.getElementById("button");
  x.style.display = "none"; //just let the css value of button to none
}

<button onclick="myFunction()" id="button">Click Me</button>

var x = document.getElementById('button');
x.onclick = function () {
    document.getElementById('button').remove();
    this.remove();
};

<button onclick="myFunction()" id="button">Click Me</button>

CodePudding user response：

You should really avoid inline styles when possible and instead rely on CSS classes, which are so much simpler:

// Get the references you'll need just once, not every time the function  runs
let content = document.querySelector(".partial");

// Set up event handlers using the modern, standard approach
document.getElementById("seeMore").addEventListener("click", function(){
  this.classList.add("hidden"); // Just add the CSS class
  content.classList.remove("partial"); // Show the full text
});

/* This class can be added or removed to any element when it needs
   to be shown or hidden. */
.hidden { display:none; }

.partial { height:40px; overflow:hidden; }

<div >What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<button type="button" id="seeMore">See More</button>