Modify the div's max-width attribute based on checkbox selection in HTML

There is a coding challenge involving a checkbox and a div. When the checkbox is checked, the max-width attribute of the div should decrease (causing it to shrink in size), and vice versa.

function adjustTableWidth(checkbox) {
  var table = document.getElementById("table-mark");
  alert(checkbox.checked);
  if (checkbox.checked === true) table.style.maxWidth = "600px";
}
#marks-table {
  overflow-x: scroll;
  /*max-width: 600px;*/
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
}
<input type="checkbox" id="check" onclick="adjustTableWidth(this)">
<div id="marks-table" style="max-width: 900px">

In this scenario, when the checkbox is checked, the width of the div should be set to 600px, and when unchecked, it should revert back to 900px.

The alert in the JavaScript function triggers as expected, but there seems to be no visible change in the div's size.

javascripthtmlcss

Answer №1

There is no need for JavaScript to accomplish this task, as we can use the following code:

#check:checked~#marks-table{
     max-width:600px;
}

#marks-table {
  overflow-x: scroll;
  max-width: 900px;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

#check:checked~#marks-table {
  max-width: 600px;
}
<input type="checkbox" id="check">
<div id="marks-table">

However, if you still prefer to achieve this using JavaScript, then your JavaScript code is correct. Just make sure to use the correct ID in getElementById, which should be "marks-table" and not "table-mark". Here's how it should look:

var marksTable = document.getElementById("marks-table");

Answer №2

You currently have an id="marks-table" element, but you are trying to access table-mark which is causing a 

Uncaught TypeError: Cannot read property 'style'
. Make sure your JavaScript id matches the div id.

Here is the solution:

function adjustWidthOfMarksTable(checkbox) {

    var marksTable = document.getElementById("marks-table");
    if (checkbox.checked === true)  {
        marksTable.style.maxWidth = "600px"
    } else {
    //if not checked
        marksTable.style.maxWidth = "900px"
    }
  
}
#marks-table {
      overflow-x: scroll;
      /*max-width: 600px;*/
      border-right: 1px solid #ddd;
      border-left: 1px solid #ddd;
    }
<input type="checkbox" id="check" onclick="adjustWidthOfMarksTable(this)">
<div id="marks-table" style="max-width: 900px">

Answer №3

Instead of using table-mark in your code, you should have used marks-table. This mistake caused an error. To fix this, update the ID as shown below:

function adjustMarksTableWidth(checkbox) {
    var marksTable = document.getElementById("marks-table");
    alert(checkbox.checked);
    if (checkbox.checked === true) marksTable.style.maxWidth = "600px";
}
 #marks-table {
      overflow-x: scroll;
      /*max-width: 600px;*/
      border-right: 1px solid #ddd;
      border-left: 1px solid #ddd;
}
    <input type="checkbox" id="check" onclick="adjustMarksTableWidth(this)">
    <div id="marks-table" style="max-width: 900px">

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

"Troubleshooting: The Challenge of a Persistent Footer's

I came across a sticky footer that met my needs, but now I am facing an issue. When I increase the resolution beyond my normal setting, the code works fine but there is spacing between the container div and the footer div. I have attached a screenshot to s ...

jqueryhtmlcsstwitter-bootstrapsticky-footer

Creating a fixed-size set in React with randomly ordered elements

I am currently working on a project where I need to retrieve a random array from a .json file using React. My goal is to create 16 cards, each displaying a number that appears twice. To ensure uniqueness, I am utilizing a Set, but I am facing an issue with ...

javascriptarraysreactjsloopsset

The horizontal scrolling with overflow-x is not functioning correctly as it is displaying the scrollbar for the vertical

I am perplexed as to why I am unable to scroll horizontally to view the other pink thumbs. Despite adding an overflow of scroll-x to the thumbs container, which should theoretically allow horizontal scrolling, it only seems to scroll vertically. Could som ...

htmlcss

Is the indigo-pink color scheme fully implemented after installing @angular/material and scss using ng add command?

After running ng add @angular/material, we are prompted to choose a CSS framework and theme. I opted for indigo-pink and scss. Will the material components automatically inherit this theme, or do we need to take additional steps? When using normal CSS (wi ...

javascriptcssangulartypescriptangular-material

Where can I locate HTML codes within WordPress?

Upon inspecting the page source, I came across the following code snippet; https://i.sstatic.net/R7Fw3.jpg I attempted to search within WordPress for the HTML codes that are displayed here, but unfortunately, I was unable to locate them. I couldn't ...

phphtmlwordpress

Async functions in Node.js are not executing in the expected sequence

I have a specific challenge of sending a POST request to my backend. This particular POST request necessitates the use of multipart/form-data. To facilitate this, I am in the process of converting image locations into Buffers before sending them all as par ...

javascriptnode.jsasynchronousasync-awaitmultipartform-data

Trigger a specific drop-down menu to appear upon selection of a radio button using AngularJS

Let me start by presenting my problem, accompanied by a simple piece of code: <body> <div> <input type="radio" name="salary"/>Per Year <select> <option value="0">All</option> ...

javascriptangularjsangularjs-directive

The concepts of width and min-width in CSS allow for controlling

I have a table with the following styles applied: width: auto; min-width: 98.5%; When viewing in Chrome, the table inside a div appears to only be about 50% of the width of the containing div. However, in IE9, the table occupies the full width. Checking ...

css

Creating a many-to-many relationship in Loopback4 with NodeJS

As I work on constructing a blog API with Loopback 4 framework, I've hit a snag in finding information on how to establish many-to-many relationships between Posts and Categories. Despite searching through the documentation and various online articles ...

javascriptnode.jsloopbackjsloopback4

Hide the modal pop up once the message has been submitted on the server side

I'm working with a bootstrap modal pop up that contains various controls and a submit button. After successfully submitting, I need to close the pop-up. The code snippet below displays the message "Record Saved successfully." if (strMessage == "Succe ...

javascriptc#jqueryasp.netbootstrap-modal

Reactive form within a parent object for nested counting

I am looking to generate a nested form based on the following data: The current data available is as follows: mainObject = { adminname: 'Saqib', adminemail: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="40 ...

javascriptangulartypescriptformsangular-reactive-forms

The absence of a key is causing an issue - deletion cannot be completed

I need assistance with removing a question after it has been answered, but I am encountering an error message stating that my key is undefined. Error: DELETE http://api/Remove/undefined 400 (Bad Request) state={ qBank:[{id=1,question:'dd',answers ...

javascriptreactjs

Guide to defining font style in vanilla-extract/CSS

I'm trying to import a fontFace using vanilla-extract/css but I'm having trouble figuring out how to do it. The code provided in the documentation is as follows: import { fontFace, style } from '@vanilla-extract/css'; const myFont = fo ...

csstypescript

Issues encountered while interpreting XML with JavaScript

My script has a javascript function that sends an http_request to a php file on my server, which then generates an XML file (output below). The same javascript function attempts to parse the XML and passes it to other functions for further processing. I h ...

javascriptxmlajaxxmlhttprequest

Transform JSON data into a PDF file using NodeJS

When a GET request is made to: 'http://localhost:4000/features', the response contains JSON Data with embedded HTML. I am looking to extract and save the content of the "name" and "description" fields as a PDF. Here is a sample snippet: [{"_id ...

htmljsonnode.js

The HTML and JavaScript implementation of the Game of Life is experiencing technical difficulties

I attempted to create my own version of the Game of Life using HTML canvas and JavaScript. With the aid of various online tutorials, I was able to write a piece of code that I am still confident in. However, upon launching the HTML page in the browser and ...

javascripthtmlhtml5-canvasconways-game-of-life

DTD syntax for specifying the attribute type of an image source file

After running a validation on my DTD file, I encountered an error that states the attribute type must be declared for element type profile. How should I go about editing my DTD file to resolve this issue? This is what my external DTD looks like: !ELEMENT ...

htmlcssxmlxsltdtd

JQuery email validation failing to function

I am new to JQuery and have created a basic validation script to verify email addresses. However, it does not seem to be working properly. Can anyone provide guidance on how to correct this issue? <script> $( "#email" ).blur(function() { var ...

javascriptjqueryvalidation

Replace the specific phrase in the passage using R

I have a task of identifying specific sentences within a paragraph and replacing them. Displayed below is the Dataframe - fulltext = c(rep("<span style=\"font-family:Calibri\"><span style=\"font-size:18px\">__ - Now</s ...

pythonhtmlrregexstring

What advantages does the static modifier offer when used with functions in TypeScript?

My journey with TypeScript has just begun, and while working in WebStorm, the IDE suggested using a static modifier... export default class MyClass { public bar(): any { // perform actions with instance values } private foo(a: any, b: ...

javascripttypescript