CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Don Paul
Don Paul

Reputation: 37

How can I toggle any form input (not all at once)?

I want to toggle input display in a form, not every input. I assigned a button for every input element, so when that button is clicked, that input should appear or disappear.

I was searching to solve this problem, but any function I found is for the entire form, I was trying js, jquery, but it won't work.

Input is something like:

 <input type="text"  id='id1' placeholder="Insert here">

And the button:

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

I was using JSfunction, but it won't help:

function myFunction(id) {
  var x = document.getElementById('id');
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

I got this error too:

Uncaught TypeError: Cannot read property 'style' of null at myFunction

Upvotes: 2

Views: 122

Answers (7)

Andrea
Andrea

Reputation: 1316

Code Standards:

Firstly, you have to understand the differences between variables and constants. As you write <button id="b_id1" onclick="myFunction(id1)">Click Me id1</button> id1 is treated like a variable, which in this case has never been declared. This lead to a reference to undefined, also id1= undefined. As you call myFunction() you are passing as argument undefined, also like myFunction(undefined); try writing instead

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

The same issue but with the inverse solutions appears when you declare the function 

function myFunction(id) {
  var x = document.getElementById('id');
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

on line 2, in var x = document.getElementById('id'); you are referencing to the string 'id' which is a constant and not the variable passed in the parameters id. Same as before try rewriting your function like this:

function myFunction(id) {
  var x = document.getElementById(id);
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

Clean coding:

I'd also recommend you to work with classes and not direct with styles, in order to make the code easier to read and to refactor, in case you want to implement some new feature. For this solution I'd use the setAttribute() function, which is well explained here: https://www.w3schools.com/jsref/met_element_setattribute.asp

Upvotes: 0

Creative Div
Creative Div

Reputation: 443

It is the issue with your ID. as you can on javascript line 2 

var x = document.getElementById('id');

You have delcare an wrong ID. It should be called "id1"

Correct is : var x = document.getElementById('id1');

function myFunction(id) {
  var x = document.getElementById('id1');
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

Upvotes: 0

Vu Thanh Tai
Vu Thanh Tai

Reputation: 44

You need add ' to javascript to detect id1 is string:

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

Upvotes: 1

Ranjan
Ranjan

Reputation: 300

function myFunction(e) {
	  var x = document.getElementById('id1');
	  x.classList.toggle("mystyle");
}
.mystyle{
		display:none;
	}
<input type="text"  id='id1' placeholder="Insert here">
  <button id="b_id1" onclick="myFunction()">Click Me id1</button>

Upvotes: 0

Schiz
Schiz

Reputation: 46

If you can use jQuery, try this code

function myFunction(id) {
  if($(id).css('display') === "none") {
    $(id).show();
  } else {
    $(id).hide();
  }
}

with your button

<button id="b_id1" onclick="myFunction('#id1');">Click Me id1</button>

Upvotes: 0

Krishna Prashatt
Krishna Prashatt

Reputation: 639

Extending @MauriceNino 's comment, if you want generic code, you can use the following. You can assign a common onclick function to the buttons which pass the button object upon clicking. From that, you can extract the input box id and manipulate that.

function myFunction(id) {
var id = id.id.split("_")[1];//extract input id from button id
  var x = document.getElementById(id);
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
<input type="text"  id='id1' placeholder="Insert here">

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

Upvotes: 0

Synapsis
Synapsis

Reputation: 1017

So, you're using a function when a button is pressed but I don't see any "onclick" in your button.

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

Add this action to your button and the function should work. The error displayed is due to the fact that you're passing a NULL id in your function so the style of the display just doesn't exist.

Upvotes: 1

Related Questions