What mistake am I making with this button?

I am facing an issue with setting up an alert on button click. When I click the button, nothing happens. Can you please check? The expected behavior is that upon clicking the button, there should be an alert showing 'foo' if the box is checked and 'bar' if it is not checked. However, currently, no alerts are being displayed on button click.


function myFunction(){
    if (document.getElementById('foo').checked) {
        alert('foo');
    } else {
        alert('bar');
    }
}

<input type="radio" name="zing" id="foo" />
<input type="radio" name="zing" id="bar"/>
<button onclick="myFunction()">
hello
</button>

Answer №1

It is common practice to write onclick in lowercase letters

function executeFunction(){
if (document.getElementById('foo').checked) {
    alert('foo');
} else {
    alert('bar');
}
}
<input type="radio" name="zing" id="foo" />
<input type="radio" name="zing" id="bar"/>
<button onclick="executeFunction()">
hello
</button>

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

Tips for accessing <Field> values in redux-form version 7.0.0

class CustomForm extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick() { const { Add, noteList } = this.props; Add('this is title value' , 'this is ...

Flask app facing compatibility issues with jQuery .getJSON

I am encountering an issue with my flask application where I am attempting to send JSON data to the browser and render it. However, the line containing $.getJSON() is not executing as expected. Here is a breakdown of the relevant code: app.py from flask ...

Ways to dynamically fetch data by merging the response outcome with a dynamic parameter from the route in Vue.js

For the first time, I have been tasked with dynamically retrieving object parameters from the URL parameter. I am aware that I can use this.$route.params.[somelink-parameter] to obtain the URL parameter, and I understand how to retrieve and store the respo ...

The page switch with a jittery effect

Could really use some assistance with this code that has been giving me trouble for quite a while now. It's a simple HTML, CSS, and JS code involving two pages. [The second page overlaps the first by default, but adjusting the z-index of the first p ...

Internet sockets, socket.io or any other similar option

As a newcomer to the world of sockets, I apologize if my questions seem simple. I have a hybrid app and a website, and I am interested in having an alert/notification appear on the website when a button is clicked within the app. While Socket io seems pr ...

Unraveling the mysteries of this PHP-generated object

Need help with iterating over a JSON object generated by PHP code in response to a web service request. Looking for guidance on rendering sub-objects in a select list, especially those with value indexes. Can someone provide assistance on populating a sel ...

Is there a way to add pins to separate entity layers, and then remove them from a specific entity layer using Bing Maps AJAX Control, Version 7.0?

Currently, I am utilizing Bing Maps to display store locations on a map. The information about the stores is coming from a dynamic JSON response. When the page loads, the map shows local stores with pushpins and infoboxes. As the map pans, my goal is to re ...

The redirect link to Facebook Messenger is functional on desktop browsers but experiences difficulties on mobile browsers

Currently, I am facing an issue with redirecting from a webpage to an m.me/?ref= Facebook link that points to a Facebook Page. The redirection works smoothly on the Desktop Browser and opens the Facebook Messenger as expected. However, when attempting the ...

Utilize useMediaQuery for identifying various breakpoints in your design

Currently, I am working on detecting multiple breakpoints in my application to ensure dynamic column generation on a Grid. Although I have managed to accomplish this task, the code appears somewhat repetitive. Is there a method through which I can simpli ...

Prevent jquery tabs from automatically jumping to the top of the page

On a website, I have implemented tabs using jQuery to display 4 different pages of data without needing to refresh the entire page. Everything is working smoothly, but there is one slight issue that I would like to address. When I scroll down on the first ...

Is there a way to modify the material of individual objects in THREE.js without creating separate Meshes?

We have developed a unique PCB Viewer using THREE.js, but now we want to enhance it with selection functionality. While the task itself isn't complex and I have managed to make it work, I am encountering performance challenges. Our goal is to allow us ...

The ConsoleCapture does not capture every console error for Sentry

Running into an issue capturing console errors with Sentry in a Next.js app. The problem arises from an error within a library that is inaccessible to us, specifically related to WebSocket "WebSocket is already in CLOSING or CLOSED state" This error is c ...

Tips on extracting specific information from nested JSON objects

I have a packet with the following data and I need to extract a specific part: "data":"YOeNkAAg1wQAYjm/pg== Is there a way to achieve this using JavaScript in node-red? { "payload": "lora/01-01-01-01-01-01-01-01/39-31-37-33-5b-37-67-19/packet_sent { ...

What are the best practices for transmitting and receiving data with React Router?

I have a project that includes both react-js and normal javascript components. I've successfully figured out how to navigate between the two, but now I want to send data between them as well. Here's the code snippet I currently have: <BrowserR ...

Utilizing the dnd library to incorporate drag and drop functionality

I've encountered an issue with the code snippet below. Although I am able to drag elements, I am unable to drop them. How can I trigger the dropFunction when a drop occurs? Drag code: <div> <a class="button" ng-class= ...

Having issues with the Vuetify component, specifically the v-date-picker not functioning properly

Hey there! I'm still getting the hang of vuetify and have been experimenting with creating functions using simple components. One such component I've been using is v-date-picker. However, I've encountered an issue where the calendar doesn&a ...

Using Angular template to embed Animate CC Canvas Export

Looking to incorporate a small animation created in animate cc into an angular template on a canvas as shown below: <div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1014px; height:650px"> <canvas id="canv ...

A stylish flyout menu with a sleek li background in jquery

Experimenting with http://tympanus.net/Tutorials/CufonizedFlyOutMenu/, I decided to remove the fly-in descriptions and am now attempting to load the extra li with a style that will "highlight" the li.current-menu-item element. An object is set up as follo ...

Guide to using the ng-click function in Angular to set focus on the input in the last row of a table

I am in the process of developing a task management application and I am looking to implement a specific feature: Upon clicking 'Add Task', a new row is automatically added to the table (this part has been completed) and the input field within ...

Be sure to include precise information in your ajax request when using fetch() or XMR/any other type of ajax request, just like you would with jQuery ajax

I am currently facing a challenge with my request using jQuery ajax() getJson() { $.ajax({ url: 'http://api.rss2json.com/v1/api.json', method: 'GET', dataType: 'json', data: ...