hide (none) div and display (block) another

Question

Learning HTML, and I have this code. At the beginning <div id = "inp"> is hidden ( due to class, CSS file )

I want to hide the <div id="prods"> when I click the button in the <form> section and show the the <div id = "inp">

function disp(prod, inp) {
  var x = document.getElementById(prod);
  var y = document.getElementById(inp);
  x.style.display = "none";
  y.style.display = "block";
}

.hidden {
  display: none;
}

<div id="prods">
  <form>
    <button type="button" onclick="disp(prods,inp)">   
          Next page</button>
  </form>
</div>
<div id="inp" class="hidden">
  <form>
  </form>
</div>

But when I click the button nothing really happens

Also `onclick="disp(prods,inp)"` should be `onclick="disp('prods','inp')"` — NewToJS, Jan 05 '18 at 12:17
Changing your code into a snippet shows what the issue is. You are passing undefined object references instead of the names of the identifiers. Change `onclick="disp(prods,inp)"` to `onclick="disp('prods','inp')"` - I would continue using the `hidden` class and simply toggle it as needed. Applying styles directly through JavaScript is hard to maintain when you decide `block` is not compatible anymore with your page flow. — Nope, Jan 05 '18 at 12:17
Always check the browser console for errors (press F12 to open the dev tools) — , Jan 05 '18 at 12:34
@ChrisG I am getting this error: Uncaught SyntaxError: Unexpected token < in this line in the JS file: ` — user9138715, Jan 05 '18 at 12:43
@user9138715 Ones you pass strings the code you posted works in the snippet above. If you have additional problems with your actual implementation you should make that a separate question as it is an unrelated issue to you not passing the identifiers as strings. — Nope, Jan 05 '18 at 12:45
@user9138715 Externally linked scripts contain only JavaScript code. Remove the ` — , Jan 05 '18 at 13:06

rolfv1 · Answer 1 · 2018-01-05T12:25:27.987

1

Right now, the way you are calling your disp function, the arguments prods and inp are assumed to be constants or variables, however, these are not the strings you need to use in getElementById(), so you will get an error in your console. What you mean to do is provide these arguments as string by wrapping them with quotes:

<button type = "button" onclick = "disp('prods','inp')">

edited Jan 05 '18 at 12:25

answered Jan 05 '18 at 12:16

rolfv1

571
3
14

2

"however, these are not defined" — they are defined – Quentin Jan 05 '18 at 12:19
1

@Quentin, strictly speaking you are absolutely right, I meant that they are not defined in the way the OP means to use them (as strings) – rolfv1 Jan 05 '18 at 12:23
passing them as strings now, still nothing changes – user9138715 Jan 05 '18 at 12:30
Where are you testing this? In a jsfiddle? If so, make sure that you set the load type of the javascript to "in head": https://jsfiddle.net/74j7r35k/ – rolfv1 Jan 05 '18 at 12:33
I am using Notepad++, `` this is how I am including the JS file – user9138715 Jan 05 '18 at 12:37
As you can check in the fiddle that I link to in my previous comment, the script works as desired there, so I am assuming that you have an issue locally. Make sure that your javascript is properly loaded. Just looking in the console of your browser (F12 in Chrome for example) if you get any error when loading the page can be really helpful. – rolfv1 Jan 05 '18 at 12:42

score 0 · Accepted Answer · answered Jan 05 '18 at 12:17

disp(prods,inp)

You are passing variables here.

prods and inp are, thanks to the legacy of IE4, global variables representing the elements with matching IDs.

var x = document.getElementById(prod);

Here you try to use those Element Objects as if there were Strings containing IDs. They get converted to strings ("[Object object]") and then the elements are looked up by ID … but you don't have elements with id="[Object object]" so you get null.

x.style.display then throws an error because you can't read properties of null.

Pass strings in the first place:

disp('prods','inp')

score 0 · Answer 3 · answered Jan 05 '18 at 12:22

Everything is ok in your code just add quote in parameter where you are passing div id

        <style>
            .hidden{
           display: none;
        }   
        </style>
        <div id = "prods">
              <form>
                 <button type = "button" onclick = "disp('prods','inp')">           
                 Next page</button>
            </form>
        </div>
        <div id = "inp" class = "hidden">
            <div>INP Div</div>
            <form>
            </form>
        </div>


        <script>
        function disp(prod,inp){
            var x = document.getElementById(prod);
            var y = document.getElementById(inp);
            x.style.display = "none";
            y.style.display = "block";
        }
        </script>

Tomáš Dejmek · Answer 4 · 2018-01-06T07:48:54.610

-3

If you already using jQuery.

$('#prods').addClass('hidden'); // to hide it
$('#prods').removeClass('hidden'); // to show it again

edited Jan 06 '18 at 07:48

answered Jan 05 '18 at 12:22

Tomáš Dejmek

151
1
4

You can also add, remove and toggle classes using pure JavaScript and as OP is not using jQuery suggesting a jQuery only solution without the equivalent JavaScript solution isn't helpful to OP. – Nope Jan 05 '18 at 12:23
Why directly jump to a JQuery answer if the OP is not using it or asking for it? – rolfv1 Jan 05 '18 at 12:24
This won't work anyway. There are no `` elements in HTML. – Quentin Jan 05 '18 at 13:17

hide (none) div and display (block) another

4 Answers4