I have only very basic html/javascript understanding.
I am trying to make what is probably only a slight modification to an existing code. Below is, first the original code, and then how I'd like to change it.
Original code:
A table gives the user a choice between left and right for several rows. The table enforces at most a single switch point from left to right going down the table, meaning that if the user chooses right at some row, the table automatically selects right for all rows below, and if the user chooses left at a given row, the table automatically selects left for all rows above. No switch point at all is allowed (meaning left is selected for all rows, or right is selected for all rows). A selection is required for each row (the app checks for this by default already).
{{ block content }}
<table class="table table-striped">
<colgroup>
<col width="45%">
<col width="10%">
<col width="45%">
</colgroup>
<tr>
<td align="right"><b>Option A</b></td>
<td></td>
<td align="left"><b>Option B</b></td>
</tr>
{{ for amount in player.right_side_amounts }}
<tr>
<td align="right">
<b>{{ player.left_side_amount }}</b> now
<td align="middle">
<input type="radio"
value="left"
name="{{ amount|json }}"
required>
<input type="radio"
name="{{ amount|json }}"
value="right" data-amount="{{ amount|json }}"
required>
</td>
<td align="left">
<b>{{ amount }} </b> next month
</tr>
{{ endfor }}
</table>
{{ formfield_errors 'switching_point' }}
<input type="hidden" name="switching_point" id="id_switching_point"
value="9999">
{{ next_button }}
{{ endblock }}
{{ block scripts }}
<script>
$(document).ready(function () {
$('input[type=radio]').change(
function () {
var clickedRadio = this;
var afterClickedRadio = false;
var radios = document.querySelectorAll('input[type=radio]');
for (i = 0; i < radios.length; ++i) {
var radio = radios[i];
if (radio === clickedRadio) {
afterClickedRadio = true;
continue;
}
if (!afterClickedRadio && clickedRadio.value === 'left' && radio.value === 'left') {
radio.checked = true;
}
if (afterClickedRadio && clickedRadio.value === 'right' && radio.value === 'right') {
radio.checked = true;
}
}
}
);
$('.otree-btn-next').click(function () {
var radios = document.querySelectorAll('input[type=radio]');
for (i = 0; i < radios.length; ++i) {
var radio = radios[i];
if (radio.value === 'right' && radio.checked) {
$('#id_switching_point').val(radio.dataset.amount);
break;
} else {
$('#id_switching_point').val(9999);
}
}
});
});
</script>
{{ endblock }}
This is how the original table looks:
original table
Modification:
Just as in the original, I'd like to have the table with a left/right choice, and enforce at most a single switch point. But, I'd like user to have the possibility to express indifference between the left and right choice at the switch point.
In other words, at the row the user chooses to switch from option A to option B, he could choose either "I prefer B" or "I am exactly indifferent between A and B".
I envision a table with three radio buttons per row, where the center button means “I am indifferent”. At whichever row the user chooses to switch ($17 in this image: what I envision) the user could select either the center button (which would express exact indifference) or the right button (which would express preference for option B). Regardless of whether the user chooses center or right button, all rows above would get checked for A, and all rows below would get checked for B. The center button can be selected at most once, since all rows below would be automatically selected right, and all rows above would be automatically selected left.
I think a second variable would need to be created relative to the original code, to record not just the switching point, but also whether the switching point occurred with indifference or strict preference.
Thank you so much for any help.
How's this? If I understood you correctly, then the rules are:
Selecting A checks all A inputs
Selecting B checks all B inputs
Selecting X will make all inputs below the X selection to be the opposite of the first checked input and everything above the X selection defaults to the first checked input selection. (If A, then B after the X. If B, then A after the X)
Prevents selecting more than one X. If more than X, the last checked X will prevail, the previous X changes according to rule 3.
In addition to those rules, I disabled the first and last middle inputs because you didn't say what happens if the first or last middle inputs are checked. Also, I added logic that prevents the user from checking any middle input before anything else is selected since you didn't say what happens in that situation either.
There are some edge cases I didn't code for, but this is more than enough to cover your rules.
https://jsfiddle.net/j1vas2x8/
<table>
<tr>
<th>A</th>
<th>X</th>
<th>B</th>
</tr>
<tr>
<td><input type="radio" name="r1[]" value="A"></td>
<!-- if the first middle selection is not disabled, then which column is the opposite of it? -->
<td><input type="radio" name="r1[]" value="X" disabled="disabled"></td>
<td><input type="radio" name="r1[]" value="B"></td>
</tr>
<tr>
<td><input type="radio" name="r2[]" value="A"></td>
<td><input type="radio" name="r2[]" value="X"></td>
<td><input type="radio" name="r2[]" value="B"></td>
</tr>
<tr>
<td><input type="radio" name="r3[]" value="A"></td>
<td><input type="radio" name="r3[]" value="X"></td>
<td><input type="radio" name="r3[]" value="B"></td>
</tr>
<tr>
<td><input type="radio" name="r4[]" value="A"></td>
<td><input type="radio" name="r4[]" value="X"></td>
<td><input type="radio" name="r4[]" value="B"></td>
</tr>
<tr>
<td><input type="radio" name="r5[]" value="A"></td>
<!-- if the last middle selection is not disabled, then what should should happen if it's selected last? -->
<td><input type="radio" name="r5[]" value="X" disabled="disabled"></td>
<td><input type="radio" name="r5[]" value="B"></td>
</tr>
</table>
var header_row = document.querySelectorAll('table tr th');
var column = {
'left': header_row[0].innerText,
'middle': header_row[1].innerText,
'right': header_row[2].innerText
};
var radios = document.querySelectorAll('input[type="radio"]');
var rows = document.querySelectorAll('table tr');
Array.from(radios).forEach(function(radio) {
radio.addEventListener('click', function(event) {
var is_more_than_one_middle_column_selected = document.querySelectorAll('input[type="radio"][value="' + column.middle + '"]:checked').length > 1;
if (is_more_than_one_middle_column_selected === true) {
// loops through all radio inputs with the middle column checked
Array.from(document.querySelectorAll('input[type="radio"][value="' + column.middle + '"]:checked')).forEach(function(input) {
if (input !== event.target) {input.checked = false;}
});
}
var current_row_index = Array.from(rows).findIndex(function(row) {
var current_input = Array.from(row.querySelectorAll('td input[type="radio"]')).find(function(input) {
return input === event.target;
});
return !!current_input;
});
var middle_selected_input_row_index = Array.from(rows).findIndex(function(row) {
return row.querySelector('input[type="radio"][value="' + column.middle + '"]')?.checked === true;
});
var is_middle_input_selected = middle_selected_input_row_index > -1;
let first_input_column = rows[1].querySelector('input[type="radio"]:checked')?.value || '';
// if the first input has not been checked but a middle input somewhere else has
if (!first_input_column && is_middle_input_selected === true) {
// uncheck the current input, and stop the script here; if script keeps going it will run into null errors
return event.target.checked = false;
}
for (var row_index = 1; row_index < rows.length; row_index++) {
// if the middle input is not checked yet
if (is_middle_input_selected === false) {
// whatever selection the current value, change all inputs to that
rows[row_index].querySelector('input[type="radio"][value="' + event.target.value + '"]').checked = true;
}
else if (is_middle_input_selected === true && row_index < middle_selected_input_row_index) {
// check the previous input to whatever the first checked input value was
rows[row_index].querySelector('input[type="radio"][value="' + first_input_column + '"]').checked = true;
}
else if (is_middle_input_selected === true && row_index > middle_selected_input_row_index) {
// check the previous input to whatever the first checked input value was
rows[row_index].querySelector('input[type="radio"][value="' + (first_input_column === column.left ? column.right : column.left) + '"]').checked = true;
}
// if the current input checked was the input that triggered this logic, and a there was more than one middle input that was checked
else if (row_index === current_row_index && is_more_than_one_middle_column_selected === true) {
// get the first checked input value
let first_input_column = rows[1].querySelector('input[type="radio"]:checked').value;
// check the previous input to whatever the first checked input value was
rows[row_index - 1].querySelector('input[type="radio"][value="' + first_input_column + '"]').checked = true;
}
}
});
});
Related
I have the following html which I can't modify because its being dynamically generated by a third party company I'm working with...
<table id="mytable">
<tbody>
<tr>
<td><font>data A</font></td>
</tr>
<tr>
<td><font>data B - Title</font></td>
</tr>
<tr>
<td><font>data B - Content</font></td>
</tr>
<!--THERE'S LIKE 65 OF THESE HIDDEN INPUT FIELDS GENERATED ON PAGE...-->
<input type="hidden" name="inpA" value>
<input type="hidden" name="inpB" value>
<input type="hidden" name="inpC" value>
<input type="hidden" name="inpD" value>
<input type="hidden" name="inpE" value>
<input type="hidden" name="inpF" value>
<!--....-->
<tr>
<td><font>data C - Title</font></td>
</tr>
<tr>
<td><font>data C - Content</font></td>
</tr>
<tr>
<td><font>data D - Title</font></td>
</tr>
<tr>
<td><font>data D - Content</font></td>
</tr>
</tbody>
</table>
I'm using a do while loop to iterate through a table for sibling elements. But I want my do while loop to exclude the input sibling elements. How can I "skip" over them?
//my specific areas to target in my table. I will add more selectors to this eventually...
let mTitles = document.querySelectorAll('#mytable tr:nth-of-type(2) > td:nth-child(1) font');
for (let i = 0, len = mTitles.length; i < len; i++) {
//get the closest parent target element to help track other sibling elements
let mParent = mTitles[i].closest('tr');
//Focusing on the first selector...
if (i == 0) {
//lets test our first selector data
console.log(`our parent element: ${mParent.nodeName}`);
console.log(`whats inside our parent elment: ${mParent.innerHTML}`);
//if the next sibling element is not null...
if (mParent.nextElementSibling != null) {
//loop through the rest of the sibling elements and capture them
let nextSibling = mParent;
let n = 0;
do {
n = n + 1;
console.log(nextSibling.nextElementSibling.innerHTML);
nextSibling = nextSibling.nextElementSibling;
} while(n < 11); //set the range of sibling elements to consider in our loop
}
}
}
As you can see when you run this in code pen, the gap between data B and data C....
I just want to remove that gap (i.e. exclude the input elements). How can I improve my logic to get to my goal?
You can see it action here - https://codepen.io/kensleylewis/pen/bGodoQW
Many thanks!
Check for input elements
We can check whether <tr> only contains <input> children:
const shouldSkip = Array.from(tr.children).every(child => child.nodeName === "INPUT");
Otherwise, we know that the <input>s are not placed in <tr>s, which the browser fixes to have every <input> in their own <tr>. Thus we can check whether a <tr> has only one element, and if that element is an <input>:
const shouldSkip = tr.children.length === 1 && tr.children[0].nodeName === "INPUT"`;
This way, we don't create a new array for each <tr>, and only do two comparisons instead of one for each child of <tr>, which is potentially more complex. For that reason, this way is what I recommend.
Check for text content
As previously mentioned, every misplaced <input>s will be inserted into their own <tr>. And since <input>s of type "hidden" don't produce any text content, we can check whether the <tr> has any text content at all:
const shouldSkip = tr.textContent.length === 0;
Solution example
As any of the previous solutions should do, I chose one to showcase. Again, this is the approach I suggest for the reasons stated earlier:
const mTitles = document.querySelectorAll('#mytable tr:nth-of-type(2) > td:nth-child(1) font');
/* Personally, a regular for-loop let's me think
* that the iterator-variable (i) will be of interest,
* though here we are only interested in the elements
* of the iterable. Hence I suggest using a foreach-loop.
*/
for (const mTitle of mTitles) {
const mParent = mTitle.closest('tr');
console.log(`our parent element: ${mParent.nodeName}`);
console.log(`whats inside our parent elment: ${mParent.innerHTML}`);
let nextSibling = mParent;
let n = 0;
while (n < 11 && nextSibling) {
const containsOnlyInputs = nextSibling.children.length === 1
&& nextSibling.children[0].nodeName === "INPUT";
if (!containsOnlyInputs) {
console.log(nextSibling.innerHTML);
++n;
}
nextSibling = nextSibling.nextElementSibling;
}
}
<table id="mytable">
<tbody>
<tr>
<td><font>data A</font></td>
</tr>
<tr>
<td><font>data B - Title</font></td>
</tr>
<tr>
<td><font>data B - Content</font></td>
</tr>
<input type="hidden" name="inpA" value>
<input type="hidden" name="inpB" value>
<input type="hidden" name="inpC" value>
<input type="hidden" name="inpD" value>
<input type="hidden" name="inpE" value>
<input type="hidden" name="inpF" value>
<!-- ... -->
<tr>
<td><font>data C - Title</font></td>
</tr>
<tr>
<td><font>data C - Content</font></td>
</tr>
<tr>
<td><font>data D - Title</font></td>
</tr>
<tr>
<td><font>data D - Content</font></td>
</tr>
</tbody>
</table>
End note
I recommend:
to use const instead of let if you know you won't reassign the variable.
to use a for...of-loop instead of a for-loop, if applicable. A for-loop (to me) suggests that the iterator-variable (usually i) will of interest, though here we are only interested in the individual elements of the array.
to check whether nextElement.nextElementSibling is non-nullish before using it. Obviously this is redundant if you check it by other means, for example by setting the while-loop's limit (see n < 11) to the amount of following siblings.
As your code is currently, effectively only consider the following siblings of mParent. With this (and also tying into my last recommendation) I would suggest a loop of this form:
let n = 0;
let sibling = mParent; // Assign previous node of the node to start with
// Assign the next sibling, and
// check whether it is not "falsy" (i.e. not equal to null or undefined)
while (n < 11 && (sibling = sibling.nextElementSibling)) {
const shouldSkip = sibling.children.length === 1
&& sibling.children[0].nodeName === "INPUT";
if (shouldSkip) continue; // Now we can use `continue`!
console.log(sibling.innerHTML);
++n;
}
Even though this is a one-liner I would still recommend it for the following reasons:
I see this pattern being used quite frequently, which disambiguates it for most.
Now we can use continue to skip an iteration, ridding us of the if-statement I used before, which makes the program flow easier to understand.
If unknown to one, it still is not too hard to understand really, is it?
You just need to check the content of innerHTML and do a console.log only if the string length > 0 or if the string is !== "".
if (nextSibling.nextElementSibling.innerHTML !== "") {
console.log(nextSibling.nextElementSibling.innerHTML);
}
//my specific areas to target in my table. I will add more selectors to this eventually...
const mTitles = document.querySelectorAll('#mytable tr:nth-of-type(2) > td:nth-child(1) font');
for (let i = 0, len = mTitles.length; i < len; i++) {
//get the closest parent target element to help track other sibling elements
const mParent = mTitles[i].closest('tr');
//Focusing on the first selector...
if (i === 0) {
//lets test our first selector data
console.log(`our parent element: ${mParent.nodeName}`);
console.log(`whats inside our parent element: ${mParent.innerHTML}`);
//if the next sibling element is not null...
if (mParent.nextElementSibling !== null) {
//loop through the rest of the sibling elements and capture them
let nextSibling = mParent;
let n = 0;
do {
n++;
const nextInnerHTML = nextSibling.nextElementSibling.innerHTML;
if (nextInnerHTML !== '') {
console.log(nextSibling.nextElementSibling.innerHTML);
}
nextSibling = nextSibling.nextElementSibling;
} while (n < 11);
}
}
}
<table id="mytable">
<tbody>
<tr>
<td>
<font>data A</font>
</td>
</tr>
<tr>
<td>
<font>data B - Title</font>
</td>
</tr>
<tr>
<td>
<font>data B - Content</font>
</td>
</tr>
<!--THERE'S LIKE 65 OF THESE HIDDEN INPUT FIELDS GENERATED ON PAGE...-->
<input type="hidden" name="inpA" value>
<input type="hidden" name="inpB" value>
<input type="hidden" name="inpC" value>
<input type="hidden" name="inpD" value>
<input type="hidden" name="inpE" value>
<input type="hidden" name="inpF" value>
<!--....-->
<tr>
<td>
<font>data C - Title</font>
</td>
</tr>
<tr>
<td>
<font>data C - Content</font>
</td>
</tr>
<tr>
<td>
<font>data D - Title</font>
</td>
</tr>
<tr>
<td>
<font>data D - Content</font>
</td>
</tr>
</tbody>
</table>
I am using CheckBoxFor to create a form of a bunch of checkboxes. I have added a class to these checkboxes but since CheckBoxFor doesn't add the class to the hidden false checkbox, I can't select groups of these generated checkboxes based upon it.
Here's a sample of the checkbox table that gets generated. When I hit the "Select All" checkbox (the top most one), I want all the checkboxes in that column to be selected. I do not want the whole table selected, just the column.
Some of the relevant HTML:
<td><input type="checkbox" name="selectAll" value="NBTC" /></td>
<td><input type="checkbox" name="selectAll" value="Contractors" /></td>
<td><input type="checkbox" name="selectAll" value="Coordinators" /></td>
<td><input type="checkbox" name="selectAll" value="NGO" /></td>
<td><input type="checkbox" name="selectAll" value="Public" /></td>
Example of the CheckBoxFor statements I'm using:
#Html.CheckBoxFor(m => m.NBTCGroup.NBTC_FA_Centroid, new {#class = "NBTC"}
This is the JS I was working with, but since the it's selecting based off the class, it doesn't work to select and unselect all as the false checkbox doesn't have the class added to it.
$(document).ready(function () {
$('input[name="selectAll"]').click(function () {
var source = $(this);
var sourceName = $(this).val();
if (sourceName == 'NBTC') {
var checkboxes = document.querySelectorAll('input[class="NBTC"]');
}
else if (sourceName == 'Contractors') {
var checkboxes = document.querySelectorAll('input[class="Contractors"]');
}
else if (sourceName == 'Coordinators') {
var checkboxes = document.querySelectorAll('input[class="Coordinators"]');
}
else if (sourceName == 'NGO') {
var checkboxes = document.querySelectorAll('input[class="NGO"]');
}
else if (sourceName == 'Public') {
var checkboxes = document.querySelectorAll('input[class="Public"]');
}
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i] != source)
checkboxes[i].checked = source.checked;
}
});
Anybody have any ideas on another way to do this?
From your code I assume you are adding NBTC, Contractors, etc classes to each group of checkboxes... you also have several selectAll checkboxes, for each group.
You can change your jQuery like this:
$('input[name="selectAll"]').click(function() {
var className = $(this).val(); // <-- get the group: NBTC, Contractors, etc
$('.' + className).prop('checked', this.checked);
// generates something like this: $('.NBTC').prop('checked', this.checked);
});
I have used this answer for check/uncheck logic.
here is my sample code
<table id="accessListTable">
<tr class="ui-grid groupHead">
<td><input type="checkbox" class="groupHeadCheck"/></td>
</tr>
<tr>
<td><input type="checkbox" id="1"/></td>
</tr>
<tr>
<td><input type="checkbox" id="2"/></td>
</tr>
<tr>
<td><input type="checkbox" id="3"/></td>
</tr>
<tr class="ui-grid groupHead">
<td><input type="checkbox" class="groupHeadCheck"/></td>
</tr>
<tr>
<td><input type="checkbox" id="4"/></td>
</tr>
</table>
E.g, When the checkbox in first row with class groupHeadCheck, all the checkboxex of id 1, 2 and 3 will also be checked.
And if all the checkboxes of 1, 2, and 3 are already checked, the checkbox in first row will be checked.
Please any help!
You can add a click handler to the group checkbox then inside the handler you can find its tr element and the tr's next sibling element till the next occurrence of tr.groupHead
$(function ($) {
$(".groupHeadCheck").on("click", function (event) {
$(this).closest('tr').nextUntil('tr.groupHead').find('input[type="checkbox"]').prop('checked', this.checked)
})
});
Demo: Fiddle
I am sure it can be done in a prettier manner, but this is the basic idea:
$("table tbody").on("change", "input[type=checkbox]", function (e) {
var currentCB = $(this);
var isChecked = this.checked;
if (currentCB.is(".groupHeadCheck")) {
var allCbs = currentCB.closest('tr').nextUntil('tr.groupHead').find('[type="checkbox"]');
allCbs.prop('checked', isChecked);
} else {
var allCbs = currentCB.closest('tr').prevAll("tr.groupHead:first").nextUntil('tr.groupHead').andSelf().find('[type="checkbox"]');
var allSlaves = allCbs.not(".groupHeadCheck");
var master = allCbs.filter(".groupHeadCheck");
var allChecked = isChecked ? allSlaves.filter(":checked").length === allSlaves.length : false;
master.prop("checked", allChecked);
}
});
and if you need to run the code to force the check all state
$(".groupHead").next().find("[type=checkbox]").change();
JSFiddle
This would check all if the first is checked (or uncheck all)
$(document).on('click', '.groupHeadCheck',function() {
$(this).closest('tr').nextUntil('tr.groupHead').find('input[type="checkbox"]').prop('checked', $(this).prop('checked'))
});
you could fiddle a bit with your classes (or IDs) to make it right for you
I know this is already answered, but I wanted a more generic way of doing this. In my case, I wanted to check all in a column until I hit a new group. I also had 3 columns with checkboxes. The ones in the first checkbox column all had names starting with "S_", the second "A_" and the third "C_". I used this to pick out the checkboxes I wanted. I also didn't name the heading checkboxes that were used to do the "check all" so it would stop when it hit the next groupings row.
You could use the class name to apply the same logic.
First, here is what a check all checkbox looked like:
<td>
<input type="checkbox" onchange="checkAll(this, 'S_');" />
</td>
Then the javascript function it calls when clicked:
function checkAll(sender, match)
{
var table = $(sender).closest('table').get(0);
var selector = "input[type='checkbox'][name^='" + match + "']";
for (var i = $(sender).closest('tr').index() + 1; i < table.rows.length; i++)
{
var cb = $(table.rows[i]).find(selector).get(0);
if (cb === undefined)
break;
if ($(cb).is(':enabled'))
cb.checked = sender.checked;
}
}
So it will search each subsequent row for a checkbox with the name starting with "S_". Only the checkboxes the user has rights to will be changed. I was going to use $(td).index() to find the right column, but this didn't work out because some rows had colspan's greater than 1.
On a button click JavaScript Validation should be: If a user select one checkbox it should allow to process further to any script, but when user selects more than one checkbox it should prompt that "you can select only one check box"
I am not getting to What javaScript I should write ?
<tr><td colspan='2'><input type='checkbox' name='check1' value=12> Q.12 Torronto in located in ?</td></tr>
<tr><td colspan='2'><input type='checkbox' name='check1' value=4> Q.4 Columbo is the capital of which country ?</td></tr>
<tr><td colspan='2'><input type='checkbox' name='check1' value=16> Q.16 Most used social suite ?</td></tr>
<tr><td colspan='2'><input type='checkbox' name='check1' value=19> Q.19 Largest State ?</td></tr>
Function call
<td><input type='submit' type='Edit' value='EDIT' formmethod='post' formaction='/~xyz/cgi-bin/Project/CheckEdit.py' onclick='return(CheckedOne())'></td></tr>
The JS which I tried:
function Checked() {
var d = document.myForm.check1;
var arr = 0;
for (var i = 0; i < d.length; i++) {
if (d[i].checked) {
arr++;
alert(arr);
}
}
if (arr == 1) return true;
else {
alert("Please select only one Checkbox");
return false;
}
}
I think you can do better using the approach by sravis using jQuery.
Here are the issues in your original code:
You call the function CheckedOne in the HTML but have a different name in the JS (Checked).
Also, use document.getElementsByName('check1'); to get the
array.
See http://jsbin.com/iTiQOFIX/1/
jQuery length will get you total checked boxes
http://jsfiddle.net/yAz2j/
$(".subtn").live('click', function() {
var total = $('.check1:checked').length;
if(total > 1) {
alert(" Checked : "+total);
// your code
} else {
alert("Checked only one!");
}
return false;
});
Also check this post: https://stackoverflow.com/a/5594976/1570901
I want to hide or show my spinner depending on what is selected in the radio button. The spinner is displayed in a table. If the user chose yes (radio button), it will display the table which the spinner is in, if the user chose no (radio button), it will hide the table the spinner is in.
I researched on Google the best way to use style in JavaScript and the one I most commonly found was using (variable).style.(css property).
I have tried this but it hasn't worked. What I want to know is that am I coding this wrong (it is not showing anything in error console and it seems right with the examples I have followed) or do I need to do it another way when it comes to display and hiding tables?
Below is my HTML code:
<table id="tblWeight">
<tr>
<th>6: Provide a Total Weight for your Session</th>
<td><input type="radio" name="weightChoice" value="yes" onClick="getWeight()"/> Yes</td>
<td><input type="radio" name="weightChoice" value="No" onClick="getWeight()"/> No</td>
</tr>
</table>
<div id="radioAlert"></div>
<br/>
<table>
<tr>
<th>Weight (%):</th>
<td class="spinner"><input type="text" class="spinnerWeight" name="txtWeight" id="txtWeight"></td>
<td><button class="scrollBtn" id="btnWeightUp" type="button"><img src="Images/black_uppointing_triangle.png" alt="Increase" /></button>
<button class="scrollBtn" id="btnWeightDown" type="button"><img src="Images/black_downpointing_triangle.png" alt="Decrease" /></button></td>
</tr>
</table>
<div id="weightAlert"></div>
<br/>
<table><tr><th>7: Module:</th>
<td><?php echo $moduleHTML; ?></td>
</tr>
</table>
Below is JavaScript code:
function getWeight() {
var weightChoice = document.getElementsByName("weightChoice");
var textWeight = document.getElementById("txtWeight");
var tableWeight = document.getElementById("tblWeight");
if(weightChoice[0].checked == true){
tableWeight.style.visibility=="visible";
textWeight.value == 0;
} else {
tableWeight.style.visibility=="hidden";
textWeight.value == 0;
}
}
Your assignment statements are written with doubled "=" characters, which makes them not be assignment statements.
if(weightChoice[0].checked == true){
tableWeight.style.visibility = "visible";
textWeight.value = 0;
}else{
tableWeight.style.visibility = "hidden";
textWeight.value = 0;
}
The "==" is a comparison operator, so your statements were not syntactically erroneous and thus no errors were reported.
You're using == to assign, when == is an equality comparison operator. It should be =:
function getWeight() {
var weightChoice = document.getElementsByName("weightChoice");
var textWeight = document.getElementById("txtWeight");
var tableWeight = document.getElementById("tblWeight");
if(weightChoice[0].checked) {
tableWeight.style.visibility = "visible";
textWeight.value = 0;
} else {
tableWeight.style.visibility = "hidden";
textWeight.value = 0;
}
}
Also, == true, which I removed, is never necessary. I repeat - never. Anywhere you use == true, just take it out.