onclick with condition from none to apply-CodePudding

I have problem that I need help with I put a simple exemple of my code from w3schools to make it more simple. I have a tab gallary with 4 images, that you can click on an image so it will get viewed bigger under. This thing is working with onclick function. What I want is to make the onclick= none until a condition happened (if text is contains something in this exemple. I made the image onclick = none and the condition to be true so the myFunction(this). In other word to make the image clickable to get viewed under, but this is not working. Sorry for my bad explanation,check the code and you will get it fast. I just want to be able to activate the clicking on the image when a condition is true.

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}

var mytextvar= document.getElementById("mytext").textContent

if(mytextvar == "keyboard"){
  document.getElementById("mytext").onclick = "myFunction(this);"
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

/* The grid: Four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
}

/* Style the images inside the grid */
.column img {
  opacity: 0.8; 
  cursor: pointer; 
}

.column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container */
.container {
  position: relative;
  display: none;
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

/* Closable button inside the expanded image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

<!-- The four columns -->
<p id="mytext">keyboard</p>


<div >
  <div >
    <img src="https://picsum.photos/200" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>
  <div >
    <img src="https://picsum.photos/201" alt="Snow" style="width:100%" onclick="">
  </div>
  <div >
    <img src="https://picsum.photos/202" alt="Mountains" style="width:100%" onclick="myFunction(this);">
  </div>
  <div >
    <img src="https://picsum.photos/204" alt="Lights" style="width:100%" onclick="myFunction(this);">
  </div>
</div>



<div >
  <span onclick="this.parentElement.style.display='none'" >&times;</span>
  <img id="expandedImg" style="width:100%">
  <div id="imgtext"></div>
</div>

CodePudding user response：

You are using a conditional for adding an onclick event:

if(mytextvar == "keyboard"){
   document.getElementById("mytext").onclick = "myFunction(this);"
}

However, when the condition mytextvar == "keyboard" is true, the event will be added and then it would never be deactivated, because you never deactivate it in the code.

What you can do is to move the conditional inside the function, so js would check the conditional every time an image is clicked, and then the code would be executed or not depending on the condition

function myFunction(imgs) {

  var mytextvar= document.getElementById("mytext").textContent

  // If condition is false, return of the function
  if(mytextvar != "keyboard")
    return;

  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}

document.getElementById("mytext").onclick = "myFunction(this);"

Note: the event would always be executed, but you return early if the condition is false

CodePudding user response：

Not sure this is what you need. this will work when you text is keyboard and once you click on it. it will show the specific image in container

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}

var mytextvar = document.getElementById("mytext");

mytextvar.addEventListener('click', function(event){
var myText = this.textContent;

if(myText == "keyboard"){
 var img = document.getElementById("txtImg"); // get the id of the particular image
 myFunction(img);

}

})

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

/* The grid: Four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
}

/* Style the images inside the grid */
.column img {
  opacity: 0.8; 
  cursor: pointer; 
}

.column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container */
.container {
  position: relative;
  display: none;
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

/* Closable button inside the expanded image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

<!-- The four columns -->
<p id="mytext">keyboard</p>


<div >
  <div >
    <img src="https://picsum.photos/200" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>
  <div >
    <img src="https://picsum.photos/201" alt="Snow" style="width:100%" id="txtImg">
  </div>
  <div >
    <img src="https://picsum.photos/202" alt="Mountains" style="width:100%" onclick="myFunction(this);">
  </div>
  <div >
    <img src="https://picsum.photos/204" alt="Lights" style="width:100%" onclick="myFunction(this);">
  </div>
</div>



<div >
  <span onclick="this.parentElement.style.display='none'" >&times;</span>
  <img id="expandedImg" style="width:100%">
  <div id="imgtext"></div>
</div>