Deactivating functionality with JavaScript

Question

Deactivating functionality with JavaScript

I'm a bit perplexed about a section of code in my current side project. I am working on inputting data entry into my inputs and selecting options, then saving it to a variable for the image/patient utilizing the available fields (such as dropdown options and gender choices) for later use.

This system is designed to allow users to enter patient data along with corresponding images (female patient, male patient, or unknown patient), specifying the type of injury that the patient sustained, and storing the entered data in the dropdown menus accordingly.

After the user writes the necessary data, they press the "AP" button to fetch the appropriate photo based on the selected sex, which then displays the bed as occupied. This process repeats for all beds.

I also need to figure out a way to disable the data entry options shown above if an empty bed (blank image) is selected.

(Link to the jsfiddle can be found in the comments below)

javascript css .net html

Answer 1

Answer №1

Feel free to try out this code snippet, with added comments for clarity:

var imgProp = {
  'padding': '3px',
  'backgroundColor': '#666699',
  'borderSize': '1ps',
  'borderStyle': 'solid',
  'borderColor': '#000000'
};

// Function to check selected images and show/hide selection data
function checkSelected() {
  var allimgs = document.getElementById('multibeds').getElementsByTagName('img');
  var nrallimgs = allimgs.length;
  var selected = false
  for(i=0; i<nrallimgs; i++) {
    if (allimgs[i].getAttribute('class') == 'selected') {
      selected = true
    }
  }
  var selectiondata = document.getElementById('selectiondata');
  if (!selected) {
    selectiondata.style.display = 'none'
  } else {
    selectiondata.style.display = 'block'
  }
}

// Function to highlight image on click
function highlightImg() {
  var allimgs = document.getElementById('multibeds').getElementsByTagName('img');
  var nrallimgs = allimgs.length;
  for(i=0; i<nrallimgs; i++) {
    allimgs[i].onclick=function() {
      if(this.style.borderStyle == imgProp.borderStyle) {
        this.style.padding = 'auto';
        this.style.background = 'none';
        this.style.border = 'none';
        this.setAttribute('class', ''); // remove class for notice selected
      }
      else {
        this.style.padding = imgProp.padding;
        this.style.backgroundColor = imgProp.backgroundColor;
        this.style.borderSize = imgProp.borderSize;
        this.style.borderStyle = imgProp.borderStyle;
        this.style.borderColor = imgProp.borderColor;
        this.setAttribute('class', 'selected'); //add class for notice selected
      }
      checkSelected()
    }
  }
}
highlightImg();
checkSelected();

h1 {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: black;
}
tr, td {
  padding: 10px;
}

<body bgcolor="#E6E6FA">
    <h1 style="text-align:center;color:white">NHS Ward Bed Booking System</h1>
    <p style="text-align:center;color:black">Click on one of the beds to select and fill in the value to place a patient/edit a patient.</p>
    <div id="multibeds">
        <table align="center">
            <tr>
                <td><img id="BedLEmpty1" src="BedLEmpty.png" alt="Bed 1" width="100" height="75" border="1" onclick="" title="Patient Bed 1" /></td>
            </tr>
            <tr>
                <td><img id="BedLEmpty3" src="BedLEmpty.png" alt="Bed 3" width="100" height="75" border="1" onclick="" title="Patient Bed 3" /></td>
            </tr>
            <tr>
                <td><img id="BedLEmpty5" src="BedLEmpty.png" alt="Bed 5" width="100" height="75" border="1" onclick="" title="Patient Bed 5" /></td>
            </tr>
            <tr>
                <td><img id="BedLEmpty7" src="BedLEmpty.png" alt="Bed 7" width="100" height="75" border="1" onclick="" title="Patient Bed 7" /></td>
            </tr>
            <td>
                <td><img id="BedLEmpty2" src="BedREmpty.png" alt="Bed 1" width="100" height="75" border="1" onclick="" title="Patient Bed 1" /></td>
            </td>
            <td>
                <td><img id="BedLEmpty4" src="BedREmpty.png" alt="Bed 3" width="100" height="75" border="1" onclick="" title="Patient Bed 3" /></td>
            </td>
            <td>
                <td><img id="BedLEmpty6" src="BedREmpty.png" alt="Bed 5" width="100" height="75" border="1" onclick="" title="Patient Bed 5" /></td>
            </td>
            <td>
                <td><img id="BedLEmpty8" src="BedREmpty.png" alt="Bed 7" width="100" height="75" border="1" onclick="" title="Patient Bed 7" /></td>
            </td>
        </table>
    </div>
       <div id="selectiondata" align="center">
        <input id="btnAdmit" type="button" value="Admit patient" style="color:red" bgcolor="#00e6e6" onclick="btnAdmit_onClick()" />
        <input id="btnDischarge" type="button" value="Discharge patient" style="color:red" bgcolor="#00e6e6" onclick="btnDischarge_onClick()" />
        <select id="btnSelect">
            <option id="LocUnknown" value="Unknown">Unknown</option>
            <option id="LocHead" value="Head">Head</option>
            <option id="LocRightArm" value="Right Arm">Right Arm</option>
            <option id="LocLeftArm" value="LeftArm">Left Arm</option>
            <option id="LocChest" value="Chest">Chest</option>
            <option id="LocAbdo" value="Abdomen">Abdomen</option>
            <option id="LocLeftLeg" value="LeftLeg">Left Leg</option>
            <option id="LocRightLeg" value="RightLeg">Right Leg</option>
        </select>
        <select id="btnGender">
            <option id="GenUnknown" value="Unknown">Unknown</option>
            <option id="GenMale" value="Male">Male</option>
            <option id="GenFemale" value="Female">Female</option>
        </select>
        <br />
        <input id="txtForename" type="text" value="Forename" />
        <input id="txtLastname" type="text" value="Firstname" />
    </div>

Answer 2

Feel free to try out this code snippet, with added comments for clarity:

var imgProp = {
  'padding': '3px',
  'backgroundColor': '#666699',
  'borderSize': '1ps',
  'borderStyle': 'solid',
  'borderColor': '#000000'
};

// Function to check selected images and show/hide selection data
function checkSelected() {
  var allimgs = document.getElementById('multibeds').getElementsByTagName('img');
  var nrallimgs = allimgs.length;
  var selected = false
  for(i=0; i<nrallimgs; i++) {
    if (allimgs[i].getAttribute('class') == 'selected') {
      selected = true
    }
  }
  var selectiondata = document.getElementById('selectiondata');
  if (!selected) {
    selectiondata.style.display = 'none'
  } else {
    selectiondata.style.display = 'block'
  }
}

// Function to highlight image on click
function highlightImg() {
  var allimgs = document.getElementById('multibeds').getElementsByTagName('img');
  var nrallimgs = allimgs.length;
  for(i=0; i<nrallimgs; i++) {
    allimgs[i].onclick=function() {
      if(this.style.borderStyle == imgProp.borderStyle) {
        this.style.padding = 'auto';
        this.style.background = 'none';
        this.style.border = 'none';
        this.setAttribute('class', ''); // remove class for notice selected
      }
      else {
        this.style.padding = imgProp.padding;
        this.style.backgroundColor = imgProp.backgroundColor;
        this.style.borderSize = imgProp.borderSize;
        this.style.borderStyle = imgProp.borderStyle;
        this.style.borderColor = imgProp.borderColor;
        this.setAttribute('class', 'selected'); //add class for notice selected
      }
      checkSelected()
    }
  }
}
highlightImg();
checkSelected();

h1 {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: black;
}
tr, td {
  padding: 10px;
}

<body bgcolor="#E6E6FA">
    <h1 style="text-align:center;color:white">NHS Ward Bed Booking System</h1>
    <p style="text-align:center;color:black">Click on one of the beds to select and fill in the value to place a patient/edit a patient.</p>
    <div id="multibeds">
        <table align="center">
            <tr>
                <td><img id="BedLEmpty1" src="BedLEmpty.png" alt="Bed 1" width="100" height="75" border="1" onclick="" title="Patient Bed 1" /></td>
            </tr>
            <tr>
                <td><img id="BedLEmpty3" src="BedLEmpty.png" alt="Bed 3" width="100" height="75" border="1" onclick="" title="Patient Bed 3" /></td>
            </tr>
            <tr>
                <td><img id="BedLEmpty5" src="BedLEmpty.png" alt="Bed 5" width="100" height="75" border="1" onclick="" title="Patient Bed 5" /></td>
            </tr>
            <tr>
                <td><img id="BedLEmpty7" src="BedLEmpty.png" alt="Bed 7" width="100" height="75" border="1" onclick="" title="Patient Bed 7" /></td>
            </tr>
            <td>
                <td><img id="BedLEmpty2" src="BedREmpty.png" alt="Bed 1" width="100" height="75" border="1" onclick="" title="Patient Bed 1" /></td>
            </td>
            <td>
                <td><img id="BedLEmpty4" src="BedREmpty.png" alt="Bed 3" width="100" height="75" border="1" onclick="" title="Patient Bed 3" /></td>
            </td>
            <td>
                <td><img id="BedLEmpty6" src="BedREmpty.png" alt="Bed 5" width="100" height="75" border="1" onclick="" title="Patient Bed 5" /></td>
            </td>
            <td>
                <td><img id="BedLEmpty8" src="BedREmpty.png" alt="Bed 7" width="100" height="75" border="1" onclick="" title="Patient Bed 7" /></td>
            </td>
        </table>
    </div>
       <div id="selectiondata" align="center">
        <input id="btnAdmit" type="button" value="Admit patient" style="color:red" bgcolor="#00e6e6" onclick="btnAdmit_onClick()" />
        <input id="btnDischarge" type="button" value="Discharge patient" style="color:red" bgcolor="#00e6e6" onclick="btnDischarge_onClick()" />
        <select id="btnSelect">
            <option id="LocUnknown" value="Unknown">Unknown</option>
            <option id="LocHead" value="Head">Head</option>
            <option id="LocRightArm" value="Right Arm">Right Arm</option>
            <option id="LocLeftArm" value="LeftArm">Left Arm</option>
            <option id="LocChest" value="Chest">Chest</option>
            <option id="LocAbdo" value="Abdomen">Abdomen</option>
            <option id="LocLeftLeg" value="LeftLeg">Left Leg</option>
            <option id="LocRightLeg" value="RightLeg">Right Leg</option>
        </select>
        <select id="btnGender">
            <option id="GenUnknown" value="Unknown">Unknown</option>
            <option id="GenMale" value="Male">Male</option>
            <option id="GenFemale" value="Female">Female</option>
        </select>
        <br />
        <input id="txtForename" type="text" value="Forename" />
        <input id="txtLastname" type="text" value="Firstname" />
    </div>

Deactivating functionality with JavaScript

Answer №1

Similar questions

Loading a series of images in advance using jQuery

Is there a way to display the title of a custom post type as a clickable link that directs to the corresponding post

Using JQuery to extract specific data from JSON strings

Difficulty encountered when attempting to utilize keyup functionality on input-groups that are added dynamically

Mastering Fluent UI Web: Adjusting the border radius of a TextField component

Creating a JSON object in AngularJS is a simple and straightforward process

Guide on utilizing protractor to confirm equality of two spans in varying positions?

Tips for steering clear of getting caught in the initial focus trap

Creating tables and defining their structure with jQuery for HTML can be done using the following steps

I am looking to have my page refresh just one time

Identify and extract all HTML content enclosed within two specified tags, then save them in a JavaScript object

Exploring dynamic loading of assemblies - comparing plugins, appDomains, StructureMap, and MEF

Tips for utilizing JSON.parse

What is the goal of the output file in Webpack?

Why is my YouTube webhook subscription request giving the error "Invalid hub.mode value"?

Place your cursor over the following element to take control

What is the best way to programmatically access this WPF XAML resource?

Steps for using the ModelName.objects.filter method in HTML

Looping over object properties using ngFor in an Angular applicationI have a question about looping

Are there any drawbacks to converting all instance methods into arrow functions in order to prevent binding loss?