Is there a way to display the icon in Javascript?

Question

Is there a way to display the icon in Javascript?

I added a glyphicon element to my page but set its visibility to hidden using CSS. My goal is to reveal the glyphicon (#gl1) when users input text and click the "post" button, but I'm encountering an issue where the glyphicon doesn't show up when triggered by JavaScript. I'm not sure why this is happening.

Here is my code: My CSS :

    <html>
    <head>
    ...
    </head>

In my HTML elements, upon clicking the "post" button with id="post", the glyphicon should become visible...

    <body>
    ...

JS Code :

    <script>
    function ClickPost(){
    ...
     }   

    </script>
    ...
    </body>    
    </html>

Upon checking the console, I see the following error message: Uncaught TypeError: Cannot read property 'style' of undefined at ClickPost (Post edit and delete.html:94) at HTMLButtonElement.onclick (Post edit and delete.html:67). Can someone please assist me with this issue?

javascript html css twitter-bootstrap-3

Answer 1

Answer №1

If you use this command window.post.innerHTML = txt;, it will update the content of the div#post element with a new value of txt. This means that all other elements within the same div#post will be replaced, including the 3 spans.

To preserve the spans, you can insert another inner element inside the div#post, like so:

<div id="post" onmousedown="">    
    <span id="gl1" class="glyphicon glyphicon-cog" ></span><br>    
    <span class="glyphicon glyphicon-pencil" id="gl2"></span>
    <span class="glyphicon glyphicon-trash" id="gl3"></span>   
    <span id="postContents"></span> <!-- this is where -->
</div>

function ClickPost() {
  var txt = window.txtar.value;
  window.postContents.innerHTML = txt;
  window.txtar.value = "";
  if (!txt) {
    window.postContents.innerHTML = "Please write something ..!";
    window.post.style.color = "#a80707";
  } else {
    window.gl1.style.visibility = "visible";
    window.post.style.color = "";
  }
}

div {
  background-color: beige;
  height: 400px;
  width: 500px;
  padding: 10px;
  border: 3px solid brown;
  margin: 20px;
}

div #txtar {
  width: 470px;
  height: 280px;
  font-size: 30px;
  padding-left: 13px;
  resize: none;
}

div .btn {
  float: right;
  margin-top: 40px;
  margin-right: 9px;
  width: 80px;
  height: 40px;
  font-size: 17px;
  font-family: monospace;
  font-weight: bold;
  background-color: beige;
  border: 1px solid brown;
}

#post {
  width: 470px;
  height: 500px;
  background-color: white;
  border: 1px solid brown;
}

#post .glyphicon-pencil,
.glyphicon-trash {
  float: right;
  color: brown;
  font-size: 20px;
  margin-left: 10px;
  visibility: hidden;
}

#gl1 {
  float: right;
  color: brown;
  font-size: 20px;
  margin-left: 10px;
  visibility: hidden;
}

#gl1, #gl3 {
  visibility: hidden;
}

#post span {
  border: 1px solid brown;
  padding: 10px;
}

#post #postContents {
  border: none;
  padding: 0;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div>
  <textarea id="txtar" placeholder="Write Something ..."></textarea>
  <button class="btn" onclick="ClickPost();">Post</button>
  <button class="btn" onclick="">Cancel</button>
</div>
<div id="post" onmousedown="">
  <span id="gl1" class="glyphicon glyphicon-cog"></span><br>
  <span class="glyphicon glyphicon-pencil" id="gl2"></span>
  <span class="glyphicon glyphicon-trash" id="gl3"></span>
  <span id="postContents"></span>
</div>

Keep in mind that I made some minor adjustments to your CSS, HTML, and JS while retaining most of your original code.

P.S. Feel free to ask if you have any questions.

Answer 2

If you use this command window.post.innerHTML = txt;, it will update the content of the div#post element with a new value of txt. This means that all other elements within the same div#post will be replaced, including the 3 spans.

To preserve the spans, you can insert another inner element inside the div#post, like so:

<div id="post" onmousedown="">    
    <span id="gl1" class="glyphicon glyphicon-cog" ></span><br>    
    <span class="glyphicon glyphicon-pencil" id="gl2"></span>
    <span class="glyphicon glyphicon-trash" id="gl3"></span>   
    <span id="postContents"></span> <!-- this is where -->
</div>

function ClickPost() {
  var txt = window.txtar.value;
  window.postContents.innerHTML = txt;
  window.txtar.value = "";
  if (!txt) {
    window.postContents.innerHTML = "Please write something ..!";
    window.post.style.color = "#a80707";
  } else {
    window.gl1.style.visibility = "visible";
    window.post.style.color = "";
  }
}

div {
  background-color: beige;
  height: 400px;
  width: 500px;
  padding: 10px;
  border: 3px solid brown;
  margin: 20px;
}

div #txtar {
  width: 470px;
  height: 280px;
  font-size: 30px;
  padding-left: 13px;
  resize: none;
}

div .btn {
  float: right;
  margin-top: 40px;
  margin-right: 9px;
  width: 80px;
  height: 40px;
  font-size: 17px;
  font-family: monospace;
  font-weight: bold;
  background-color: beige;
  border: 1px solid brown;
}

#post {
  width: 470px;
  height: 500px;
  background-color: white;
  border: 1px solid brown;
}

#post .glyphicon-pencil,
.glyphicon-trash {
  float: right;
  color: brown;
  font-size: 20px;
  margin-left: 10px;
  visibility: hidden;
}

#gl1 {
  float: right;
  color: brown;
  font-size: 20px;
  margin-left: 10px;
  visibility: hidden;
}

#gl1, #gl3 {
  visibility: hidden;
}

#post span {
  border: 1px solid brown;
  padding: 10px;
}

#post #postContents {
  border: none;
  padding: 0;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div>
  <textarea id="txtar" placeholder="Write Something ..."></textarea>
  <button class="btn" onclick="ClickPost();">Post</button>
  <button class="btn" onclick="">Cancel</button>
</div>
<div id="post" onmousedown="">
  <span id="gl1" class="glyphicon glyphicon-cog"></span><br>
  <span class="glyphicon glyphicon-pencil" id="gl2"></span>
  <span class="glyphicon glyphicon-trash" id="gl3"></span>
  <span id="postContents"></span>
</div>

Keep in mind that I made some minor adjustments to your CSS, HTML, and JS while retaining most of your original code.

P.S. Feel free to ask if you have any questions.

Is there a way to display the icon in Javascript?

Answer №1

Similar questions

Using Object Value as Variable instead of String in JavaScript/React

What could be the reason for the selection box in my form not changing the items when togg

What is the rationale behind calling the open() and send() functions after the anonymous function() in the following code snippet?

Automatically dismiss a Modal Popup without the need for a button or click event

Angular data binding between an input element and a span element

"Utilize CSS Flexbox to create a layout with set width and uniform

Using the index property within *ngFor in Angular versions 2, 4, and 5

Tips for avoiding deleting content within a span element when using contenteditable

Latest News: The store is now received in the mutation, instead of the state

Adjusting the height of an iframe in real-time

Styling Arrow Containers with CSS

Providing access to information even in the absence of JavaScript functionality

`The error "mockResolvedValue is not recognized as a function when using partial mocks in Jest with Typescript

Having difficulty with sending an AJAX GET request to connect to mongodb

Tips for exchanging divs in a mobile view using CSS

Struggling with Getting My Animation to Function Correctly

There seems to be a glitch with certain div elements not behaving as expected in Bootstrap version

Maintaining Focus on Textbox within a Nested Update Panel in Asp.NET

Update the label for the weekday on Material UI picker

The error message "the property '_env_' is not found on the type 'Window & typeof globalThis - React / Typescript ERROR" indicates that the specified property is not present in the