Click on various buttons in HTML/CSS to modify the content within the body

I'm looking to dynamically change the content on my webpage by clicking a button, but I'm unsure of how to achieve this using just HTML and CSS. Do I need to utilize another web development language like JavaScript?

Currently, I have two buttons - Button 1 and Button 2. When Button 2 is clicked, I want to update the content within the body element.

Here's a snippet of my HTML:

.body {
    //position: absolute;
    opacity: 0.9;
    //position: relative;
    margin-left: 250px;
    width: 800px;
    height: 1200px;
    background-color: gray;
    box-shadow: 10px 10px 5px blue;
    border-radius: 25px;
    border: 2px solid #a1a1a1;
}

a.button {
    width: 60px;
    height: 20px;
    margin-left: 260px;
    margin-top: 30px;
    display: inline-block;
    outline: none;
    color: white;
    background: #383838;
    cursor: pointer;
    text-color: white;
    text-align: center;
    text-decoration: none;
    font: bold 14px/100% Arial, Helvetica, sans-serif;

And here's a section from my CSS:

<div class="button">BUTTON 1</a>
</div>

<div class="food">BUTTON 2</a>

<div class="body">Helloooooooo</div>

If anyone has any insight or tips on how to make this functionality work as desired, I would greatly appreciate it!

javascripthtmlcss

Answer №1

To enhance interactivity on your website, it is essential to incorporate Javascript and create click event handlers for buttons that can dynamically change the displayed content. For more information, you can refer to this helpful article

Considering the recent update in your code, I suggest utilizing jQuery for its efficiency. With jQuery, you can easily achieve tasks like:

$('.button').on('click', function () {
    $('.body').html('New content.');
});
$('.food').on('click', function () {
    $('.body').html('Some other stuff.');
});

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 could be causing this error to occur? I've already got node.js installed on my system

When I enter npm init in the Visual Studio Code - Insiders terminal, I get the following error message: npm init npm : The term 'npm' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the ...

javascriptnode.jsnpm

Center sidenav material 2 in alignment

Using Angular Material 2 presents a challenge for me: While I can align the text in the sidenav to center, I am struggling to align the button correctly. https://i.sstatic.net/vjHw4.png <md-sidenav-layout fullscreen> <md-sidenav #start mode=" ...

htmlcssangularangular-materialangular-material2

Uncovering elements through XPath

Looking for some assistance with xpath for selenium. I need help grabbing a list of links from the articles in the HTML below, but only for the available items. <html> <body> <div class="listing"> <h3>Availa ...

htmlseleniumxpath

Having trouble overriding the Slick carousel style in Angular 6?

Currently, I am utilizing Slick and jQuery for a carousel on my website. There seems to be an issue with the overriding style for the slick dots set in the component. Despite specifying the style in the component's CSS, the slick dots do not reflect t ...

cssangularslick.js

Creating two tables in JavaScript and styling them with separate CSS designs

I am in the process of creating two tables dynamically using JScript. Instead of using the traditional method of separating them with assigned tags in HTML, I have approached the creation of the first table in a different way: function makeCells() { v ...

javascripthtmlcsshtml-table

Is there a different method to retrieve language bundles with next-i18next instead of using a customized Node server?

Currently, I am developing a Next.js application that will utilize i18next translations organized in the recommended file structure for bundles. For example: static/locales/en/common.js static/locales/de/common.js You can refer to this article: https://m ...

javascriptreactjsnext.jsi18next

Pop-up notification badge using AJAX technology

Is there a way to implement a notification number badge using Ajax, similar to what Facebook does? I can't provide an image here, but most people are probably familiar with the concept. It's like when you sign into Facebook and see a small number ...

phpjqueryajaxcss

Determine the location of a shape in Kinetic.js while it is moving with the .move() method

I recently started working on an HTML5 game using Kinetic.js, and I'm still getting the hang of it. As a newcomer to HTML5 Canvas development, I've managed to create a simple game where a spaceship moves across the screen based on arrow key input ...

javascripthtmlcanvasdom-eventskineticjs

What is the best way to define a function in React hooks - using a function statement or

When working with a react hook and needing to define a function inside it, which approach is preferable? useEffect(() => { //... function handler() {} //... }, []); or should I use the newer const declaration instead? useEffect(() => { ...

javascriptreactjsreact-hooks

Graphql query using $http.post is unsuccessful

I successfully made a request for the code below, but I am encountering an issue where I am not receiving any data back. The "preview" tab of the request in Chrome simply displays "Error Not Found". Interestingly, when I try the same query in GraphiQL, i ...

javascriptangularjsnode.jshttpgraphql

I have been struggling to make react-hook-form validate my input correctly ever since I moved the input to its own component

I have a Form.js component that generates a form element. Inside this form element, there is a FormGroup component that accepts props like inputType, inputName, inputPlaceholder, and renders an input field with a label. I am using react-hook-form for input ...

javascriptreactjsreact-hook-form

Exploring various substances when combining shapes in Three.js enhances the visual appeal and complexity of

I have a vision to construct a Pine tree using 2 different meshes - one for the trunk and another for the bush. Here is what I have tried so far: var pine_geometry = new THREE.Geometry(); var pine_texture_1 = THREE.ImageUtils.loadTexture('./res/text ...

javascriptmergethree.jsmesh

Why is the parameter value becoming null during an Ajax call?

I am passing a parameter from HTML to JSP, but when I try to retrieve the value in JSP, it returns null. Can someone help me figure out what's wrong with my code and provide any suggestions? The value is successfully displayed in an alert using JavaS ...

javascripthtmlajaxjsp

Loading content onto a webpage

I have seen similar questions before, but I couldn't find a relevant answer that fits my requirements. My question is about how people create loading text on a webpage, where the text starts off in grey and gradually changes to white as the page loads ...

jqueryhtmlcssajax

Three.js is experiencing difficulties in loading textures for custom Geometry with ShaderMaterial

A Geometry (pyramid) is defined here with four vertices and 4 faces - var geom = new THREE.Geometry(); geom.vertices.push(new THREE.Vector3(0,100,0), new THREE.Vector3(-100,-100,100), new THREE.Vector3(0,-100,-100), new THREE.Vector3(100,-100,100)); geom ...

javascriptthree.jstextures

Efficiently rearranging elements by adjusting their top values techniques

My iPhone lockscreen theme features various elements displaying weather facts such as text and small images. Currently, these elements are positioned in the middle of the screen and I want to move them all to the top. Each element has a unique position abs ...

javascripthtmlcsspositioning

Optimal method for showcasing a logo bigger than the navigation bar

Seeking Advice: I am trying to incorporate a 100px by 100px logo on the left side of my navigation bar, which is only 50px in height. What changes can I make to the HTML and CSS structure for this design? My current setup includes: <div id="h ...

htmlcsswebnavbargraphical-logo

Jquery onchange event fails to fire

$('#selectclassid').trigger("change"); $('#selectclassid').on('change', function() { }); When trying to manually trigger the onchange event, it does not seem to be firing as expected. Although this format is commonly seen ...

javascriptjqueryhtml

I'm receiving a Reference Error stating that 'next()' is not defined, despite the fact that I have defined it in my JavaScript code. What could be causing this issue?

I have a javascript function called next() to process information and then call the function from HTML. However, my Firefox console is showing a ReferenceError: 'next' is not defined. I am aware that there is an error in my code, but I cannot pin ...

javascriptjquerydjangoajaxpython-3.x

I am experimenting with showcasing a series of Bootstrap div elements, each containing a dynamic carousel of images sourced from a database along with additional information

My image display is working fine, but the other divs are appearing within the first div and the additional information like title and description are not showing. I'm aiming to have six rows, each with two columns, displaying a carousel of images and ...

phphtmlcarouselbootstrap-5