Toggling in JS does not alter the DIV element

I attempted to utilize Bootstrap toggle to modify the div HTML content similar to the example shown at with a slight modification, but unfortunately, it did not function as expected due to a discrepancy in my current JavaScript code. I am unsure of what I am doing wrong.

<!DOCTYPE html>
<html lang="he">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="css/onoff.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script type="text/javascript" src="/path/to/jquery-latest.js"></script> 
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script> 

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

<!-- Bootstrap Table -->
<!--- THE ISSUE LINES ---->  
<!-- DataTable -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<!--- THE ISSUE LINES ----> 


<head>
<input id="toggle-event" type="checkbox" data-toggle="toggle">
    <div id="console-event"></div>
</head>



    <script>
   $(document).ready(function($) {
    $('#toggle-event').on('change',(function() {
      $('#console-event').html('Toggle: ' + $(this).prop('checked'))
    })
  )})
    </script>

EDIT

I rectified the comma issue, however, the functionality still remains faulty. The problem does not lie within the comma error as stated. My code is free from this particular mistake. The real issue seems to arise from these specified lines:

   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

Whenever these lines are added, the functionality ceases to work. However, upon their removal, everything works perfectly fine.

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Just a small typo ("." should be replaced with ',').

on('change'. (function() { => on('change', (function() {

Here is the corrected code snippet:

$('#toggle-event').on('change', (function() {
      $('#console-event').html('Toggle: ' + $(this).prop('checked'))
})

Answer №2

  $(document).ready(function() {
    $('#toggle-event').on('change', function() {
      $('#console-event').html('Toggle: ' + $(this).prop('checked'));
    });
  });

Looks like there was an extra ")" in your code!

Answer №3

Here is the revised version of your script code:


$(document).ready(function() {
 $('#toggle-event').change(function() {
  $('#console-event').html('Toggle: ' + $(this).prop('checked'));
});

})

Answer №4

In order to utilize the "on" function in the following line:

 $('#toggle-event').on('change'.(function() {

Instead of '.(', replace it with a comma after 'change'.

$('#toggle-event').on('change', function() {
    $('#console-event').html('Toggle: ' + $(this).prop('checked'));
});

Answer №5

You have added the head tag multiple times already, there is no need to add it again.

Your update should look like this; don't worry about integrity and crossorigin.

Reference: Understanding the integrity and crossorigin attributes

<!DOCTYPE html>
<html lang="he">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"  >
  <!-- Optional theme -->
  <link rel="stylesheet"    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
  <!-- Latest compiled and minified JavaScript -->
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
  <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
  </head>

<body>
<script>
   $(document).ready(function() {
    $('#toggle-event').change(function() {
     $('#console-event').html('Toggle: ' + $(this).prop('checked'));
   });
 })
  </script>
  <input id="toggle-event" type="checkbox" data-toggle="toggle">
    <div id="console-event"></div>
   </body>

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

Upon clicking, the input texts revert to their original default values

I have a form below that is working as intended, except for one issue. When I click the 'Add' link, the texts in all the textboxes revert to their default values, as shown in the images. How can I resolve this problem? Thank you. before click: ...

javascripthtml

Vue.js: Select a different div within the Vue object instead of the one that is bound

I am currently utilizing Vue and Leaflet to showcase polygons (zones) on a map and exhibit relevant information (messages) upon clicking on specific polygons. The div responsible for rendering these messages has the unique id "#messagearea" and is connec ...

javascriptleafletvue.js

Loading Collada files with a progress callback function can help track the

Is there a proper way to incorporate a loading bar while using the ColladaLoader? The code indicates that the loader requires three parameters, with one being a progressCallback. progressCallback( { total: length, loaded: request.responseText.length } ); ...

javascriptthree.jsloadercollada

Creating a C# view model with jQuery integration

I am facing an issue with binding a list property of a view model using jQuery. The view model in question is as follows: public class ToolsAddViewModel { public string Tools_Name { get; set; } public string Tools_Desc { get; set; } ...

javascriptc#jquery.netasp.net-mvc

How can we dynamically update an environment variable for the IP address before running npm start in a React application?

Currently, I am attempting to automatically set the REACT_APP_DEPLOY_DOMAIN variable in the .env file. Here is one approach that I have implemented to address this challenge. In the script below, I am extracting my IP address: const os = require("os"); ...

javascriptreactjsenvironment-variables

Transitioning from left to right, picture smoothly scrolls into view using Way

I've explored various websites and even attempted to decipher a waypoint guide, but unfortunately, I haven't had any success. The scroll function doesn't seem to be working with the code below. (source: ) Any assistance on this matter would ...

javascriptjquerycss

Tips on relocating the input position to the top

Currently, I have a text input that is centered horizontally when typing text. However, I want it to be positioned at the top instead. See the following code: height: 143px; width: 782px; font-family: 'Roboto Mono'; background: #FFFFFF; border ...

htmlcss

Ways to stop a JS plugin affecting HTML anchors and preventing them from automatically scrolling to the top

My friend is working on a website and he's using a plugin called Flip Lightbox. The basic functionality of the plugin is that when you click on an image, it flips over and pops out as a lightbox. Everything works fine, however, if you scroll down the ...

javascriptjqueryhtmlcss

Error: The property 'scrollIntoView' cannot be read because it is null

class MessageApp extends Component { constructor(props) { super(props) this.state = { text: "", messages: [] } } componentDidMount() { const config = { apiKey: "<api-key>", authDomain: "<projec ...

javascriptreactjs

The next.js application utilizing a custom server is experiencing rendering issues

Expanding my knowledge to next.js, I might be overlooking a simple aspect. My goal is to implement custom routes, so I crafted a server.js file and adjusted the command in my package.json to node server.js. Below is the entirety of the server.js file: con ...

javascriptexpressnext.js

Implement the Vue.js @click directive in a location outside of an HTML element

I've set up a link like this: <a href="#" @click="modal=true">Open modal</a> Here's the data setup: export default { data () { return { modal: false } } } Is there a way to trigger the cli ...

javascriptjqueryhtmlvue.jsvuejs2

When trying to use the `map: texture` with a new `THREE.Texture(canvas)

i'm trying to apply the texture from new THREE.Texture(canvas) to the PointsMaterial, but it's not working as expected. The canvas appears on the top right corner, however, only white points are visible in the CubeGeometry. var texture = new ...

javascriptcanvasthree.js

Fixed position does not adjust based on the screen resolution

If I were to create a web page, I would include a main menu that always remains on the screen, similar to this design: There are no issues with screen resolution exceeding 1300px, as seen in the image above. However, when attempting to resize the browser ...

htmlcssposition

Is there a way to include a React component within the setContent method of Leaflet?

Is there a way to trigger a React JS component in setContent? I am looking for a solution to add a button within a popup Leaflet, which when clicked will call a React component. While I am aware of the "reactDomserver.rendertostring" method to co ...

javascriptreactjsleaflet

Choosing a recently inserted row in jqGrid

After reloading the grid, I am trying to select the newly added row, which is always added at the end. However, it seems impossible to do so after the reload. Is there a reliable way to select the last row after reloading the grid? The current code I have ...

javascriptjqueryjqgrid

Blog Writer: Picture quality compromised when adjusting size

Issue with blurry images after resizing. The problem is noticeable in the three main images located under the Header section. To preview the blog, click on this link: Click Here Your assistance in solving this issue would be greatly appreciated. Thank yo ...

javascriptjqueryhtmlcssblogger

Utilize the `addEventListener` and `removeEventListener` functions on the menu to

Why is my mobile menu not functioning correctly? The submenu should open on the first click and redirect to the parent URL on the second click, which works fine. However, when the window width increases to 768px or more, the submenu should appear on hover ...

javascripthtmlcssaddeventlistenerwindow-resize

What is the best way to adjust the decimal values in my API calls?

Is there a way to adjust the numerical data returned by the API to display only two decimal places instead of three? For example, if the number is 140.444, I want it to show as 140.44 What changes do I need to make? function fetchData() { fetch(" ...

javascripthtmlcssfetch-api

Switching images between mobile and desktop view in responsive mode is a useful feature for optimizing

Within a specific folder structure, I have a collection of images designated for both desktop and mobile displays: img: img-1.png img-2.png img-3.png img-4.png img-5.png img-6.png img/mobile: img-1.png img-2.png ...

imagecssresponsive-designsass

Enhancing the appearance of buttons with hover effects in Twitter Bootstrap

I am interested in customizing the hover button styling for Bootstrap v3.2. The default behavior is to darken on hover, but I would like to make it lighter instead. Although I checked the Buttons Less variables, I couldn't find an option specifically ...

csstwitter-bootstraptwitter-bootstrap-3sass