How to html if statement

Question

I want to display a button only if a statement is true:

 <button type="button" id="btn1" class ="btn1"> btn1 </button>
 <button type="button" id="btn2" class="btn2"> btn2 </button>
 <script>          
             var statement= 1;
             if (statement== 1){
                    <button type="button" id="btn3" class="btn3"> btn3</button>
             }
                                  
 </script>

My html looks like this atm. But It doesnt work, even if my statement is 1=1. How can I achieve this working without a button click event or some interaction?

developer.mozilla.org/en-US/docs/Learn/JavaScript/…

Teemu
– Teemu

2022-06-01 10:18:42 +00:00
Commented Jun 1, 2022 at 10:18 — Teemu
– Teemu, Commented Jun 1, 2022 at 10:18

Lars Flieger · Accepted Answer · 2022-06-01 10:52:59Z

You could use document.write to directly write into the HTML output. (Mentioned by @Ivar in the comments) Just place the script where you want to write something.

<button type="button" id="btn1" class="btn1"> btn1 </button>
<button type="button" id="btn2" class="btn2"> btn2 </button>
<script>
var statement = 1;
if (statement == 1) {
  document.write('<button type="button" id="btn3" class="btn3"> btn3</button>');
}
</script>

You can decide where to display the button by moving the script tag to the location where you want to insert it. See example.

However a more commonly used approach is to manipulate the DOM instead of "echoing" your result in JavaScript.

You could have a button and change it's display state:

var statement = 1;
if (statement == 1) {
  document.querySelector("#btn3").style.display = "inline-block"
}

<button type="button" id="btn1" class="btn1"> btn1 </button>
<button type="button" id="btn2" class="btn2"> btn2 </button>
<button type="button" id="btn3" class="btn3" style="display: none;"> btn3</button>

You could create a button and add it to the DOM:

const button = document.createElement("button")
button.type = "button"
button.id = "btn3"
button.classList.add("btn3") // Adds one class with the name btn3

button.textContent = "btn3" // Writes what is inside <button>....</button>

document.body.append(button) // Adds element below each other elements

<button type="button" id="btn1" class="btn1"> btn1 </button>
<button type="button" id="btn2" class="btn2"> btn2 </button>
<button type="button" id="btn3" class="btn3" style="display: none;"> btn3</button>

More about:

You don't "have" to. document.write() is quite capable of "echoing" the result.
@Ivar True, but it's still DOM manipulation. You do not write dynamic HTML like in PHP where you can just echo something in. Do you have an idea how we can express this better in my answer?
document.write() writes to the document stream, so in a sense it is very similar to how PHP would do it. It doesn't directly manipulate the DOM (of course the DOM will be different due to the HTML being inserted, but that would be no different from how you would echo it in PHP). Now I'm not saying that it is a preferred way and in most cases document.write() causes more trouble than it solves. I'm just stating that the possibility exists. :-)
Good point! You are right :) I was somehow not thinking about it this way... Can I add your example to my answer?

Shubham Sogi · Accepted Answer · 2022-06-01 10:28:50Z

<button type="button" id="btn1" class ="btn1"> btn1 </button>
 <button type="button" id="btn2" class="btn2"> btn2 </button>
 <script>          
             var statement= 1;
             if (statement == 1){
                var x = document.createElement("button");
                var t = document.createTextNode("Click me");
                    x.appendChild(t);
                document.body.appendChild(x)
             }
                                  
 </script>

Collectives™ on Stack Overflow

How to html if statement

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related