Display or conceal various objects using a single button in HTML

I've been working on creating a chatbot widget for my website, but I've run into an issue. The "Chat with us" button only shows the bot and not the close button as well.

Here's what I've attempted:

<input id="chat" type="button" onclick="Show();" value="Chat with us" />
    <script type="text/javascript">
        function Show() {
            document.getElementById("bot").style.display = "block";
            document.getElementById("close").style.display = "block";
            document.getElementById("chat").style.display = "none";
        }
    </script>

The goal is to display both the bot and the close button simultaneously.

javascripthtmlcss

Answer №1

Make sure to remove the extra braces in your function. Keep only the necessary ones:

function Display() {
  document.getElementById("bot").style.display = "block";
  document.getElementById("close").style.display = "block";
  document.getElementById("chat").style.display = "none";
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to change the maxWidthLg of Material UI's .MuiContainer?

I need to remove the max-width that is set in the theme. When I look at it in Chrome and uncheck the option, it functions as desired: @media (min-width: 1280px) .MuiContainer-maxWidthLg { max-width: 1280px; } How can I achieve this? I have attempted ...

cssreactjsmaterial-uioverriding

What steps should I take to grant API access if cross-browser requests are restricted?

Creating a C# web service to retrieve data from a server raises the question of how to grant API access to other users who want to query it using client-side code. For example, imagine the web service is hosted on Domain1.com. How can someone from Domain2 ...

c#javascriptjqueryasp.netajax

Issue with Electron-vue: 'compute:' not functioning as expected

My attempt to create a simple example using the element-ui library was not successful. There are two 'switches' with different active state values: 2 and 1. The values of the switches are supposed to be displayed in <p>{{sw1}}</p> and ...

javascriptvue.jselectron

Encountering difficulties while trying to access the SQLite database file through a JavaScript Axios GET request

Having trouble opening an sqlite DB file from a js axios.get request which is resulting in an exception message being outputted to the console. The request is supposed to call my PHP controller to retrieve data from the DB and return it json-encoded. On t ...

javascriptphpvue.jssqliteaxios

Receive characteristics in component specification

Is there a way to pass the native attributes of an img element to a custom image component without explicitly defining each one, like alt, and have them all be applied to the img tag? Here is an example of what I mean: @Component({ selector: 'image ...

javascriptangular

Problem: Tailwind CSS styles are not being applied on responsive screens in Next.js.Issue: Despite

I'm attempting to apply a custom class to a div that should only be active on "md" screens. However, it doesn't seem to be working - <div className="md:myclass"/> tailwind-config.ts theme: { screens:{ 'sm': { ...

cssreactjsnext.jsresponsive-designtailwind-css

javascript calculate average based on user input array

There is a problem that I am trying to solve, but as a beginner it seems quite challenging. Here is the code I have written so far, however, when I run it only one window appears. Any advice or guidance would be greatly appreciated. var years = prompt(" ...

javascriptarrays

Analyzing and swapping objects within two arrays

Looking for a better way to append an array of objects customData to another array testData? If there are duplicate objects with the same name, replace them in the resulting array while maintaining their order. Here's my current approach in ES6 - any ...

javascriptecmascript-6

Using Vue.js and axios to manipulate injected HTML content

I am currently working on a project using vue.js and axios to fetch the latest post content from a specific category of a WordPress site using REST API. The post content is always in the form of an ordered list (OL) which will then be displayed as a carous ...

javascriptajaxvue.jsaxios

Tips on updating CSS styles for navigation bar links in real time

Currently, my homepage displays a CSS content hover effect when the user interacts with the icons. However, I am facing an issue where all icons show the same text "home" on hover. How can I customize the text output for each individual icon/link? Your hel ...

htmlcsssass

Creating a Dropdown list using Javascript

I am currently working on implementing inline CRUD operations in MVC 5. When a user clicks a specific button to add new records, it should create a dynamic table row. Below is the JavaScript code I am using: function tblnewrow() { var newrow = ' ...

javascriptc#asp.net-mvc

Searching for similar but not identical results using Knex.js

I am seeking a solution to retrieve similar posts without including the post itself. Here is my approach: export async function getSimilars(slug: string) { const excludeThis = await getBySlug(slug) const posts = await knex('posts') .whe ...

javascriptnode.jstypescriptpostgresqlknex.js

What's the best way to integrate Bootstrap into my HTML document?

Hey there, I'm new to the coding world and just started learning. I could use some assistance with including Bootstrap v5.1 in my HTML code. The online course I'm taking is using an older version of Bootstrap, so I'm having trouble finding t ...

javascripthtmltwitter-bootstrapbootstrap-5

The Node.js POST request is unexpectedly returning 'undefined'

I'm currently working on a project for an online course and I'm encountering an issue with making an API call. It seems that I am getting undefined responses to my post request because the user input is not being retrieved properly. Below are the ...

javascriptnode.jsexpress

Why is my Ajax utilizing PHP _POST not functioning as expected?

I am facing an issue with the JavaScript code below: <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js'></script> <script> function deletUserInfo(id_user){ console.log(id_user); ...

javascriptphpjqueryajaxpost

Dealing with unexpected modifications in a React class component

In short, I need to adjust the data in my class component before sending it to the server to match the API request format. To achieve this, I created a method called transformData within my class component which transforms the data extracted from the state ...

javascriptreactjsnext.js

Problem with AWS Lambda function handler failing to insert data into Athena

Trying out a sample code snippet for Amazon Athena to test data insertion, but it's not working as expected. The CloudWatch logs don't show any output after the statement execution is completed. Even when switching to a simple select statement, t ...

javascriptnode.jsaws-lambdaamazon-athena

Leveraging document.getElementById alongside css modules

When trying to retrieve an element that is using a css module, I encountered a problem where the id of the element changes after rendering. As a result, document.getElementById("modal") returns null. import React from "react"; export const HandleClick = ...

javascriptreactjssass

Step-by-step guide on uploading a local JSON file to Google Maps

I am in the process of creating a map for my website using the Google Maps JavaScript API. The map includes a local JSON layer that outlines a specific polygon area on the map. Everything worked perfectly when I tested it within Visual Studio, but when I t ...

javascriptjsongoogle-maps

What is causing this code to malfunction in AngularJS version 1.2?

Check out this code snippet I wrote using Angular 1.2: http://jsfiddle.net/VmkQy/1/ <div ng-app="app"> Title is: <span my-directive data-title="Test title">{{ title }}</span> </div> angular.module('app', []) .dir ...

javascriptangularjsangularjs-directive