I'm trying to pull in the title from another element and post that value inside of the span with the class .selected-swatch and change depending on which option swatch is selected but I keep getting the error:
"TypeError: document.querySelector(...) is null"
JS:
<script>
var swatches = document.getElementsByClassName('form-option-swatch');
for (var i=0; i < swatches.length; i++) {
swatches[i].onclick = function(){
console.log('yep');
document.querySelector('.form-option-variant[title="' + this.title + '"]').click();
document.querySelector('.selected-swatch').innerHTML = this.title;
}
};
</script>
HTML:
<div class="productView-optionsGrid">
<div data-product-option-change="" style="">
<div class="form-field" data-product-attribute="swatch">
<label class="form-label form-label--alternate form-label--inlineSmall">
<strong>Design:</strong>
<span class="selected-swatch" data-option-value=""></span>
</label>
<input class="form-radio" type="radio" name="attribute[115]" value="100" id="attribute_swatch_115_100" required="" data-state="false">
<label class="form-option form-option-swatch" for="attribute_swatch_115_100" data-product-attribute-value="100">
<span class="form-option-variant form-option-variant--pattern" title="Champion" style="background-image: url('https://cdn11.bigcommerce.com/s-oe8t2pkj6q/images/stencil/64x64/attribute_value_images/100.preview.jpg?t=1578332252');"></span>
<span class="form-option-expanded">
<span class="form-option-image" style="background-image: url('https://cdn11.bigcommerce.com/s-oe8t2pkj6q/images/stencil/original/attribute_value_images/100.preview.jpg?t=1578332252');"></span>
</span>
</label>
<input class="form-radio" type="radio" name="attribute[115]" value="1604" id="attribute_swatch_115_1604" required="" data-state="false">
<label class="form-option form-option-swatch" for="attribute_swatch_115_1604" data-product-attribute-value="1604">
<span class="form-option-variant form-option-variant--pattern" title="Drive" style="background-image: url('https://cdn11.bigcommerce.com/s-oe8t2pkj6q/images/stencil/64x64/attribute_value_images/1604.preview.jpg?t=1578332252');"></span>
<span class="form-option-expanded">
<span class="form-option-image" style="background-image: url('https://cdn11.bigcommerce.com/s-oe8t2pkj6q/images/stencil/original/attribute_value_images/1604.preview.jpg?t=1578332252');"></span>
</span>
</label>
</div>
</div>
</div>
Related
I am trying to disable input when a radio button is changed, but it does not change.
The one in the first of the ready function $(".key").prop('disabled', true); works fine.
<div class="card-body">
#*Title*#
<div class="form-group">
<label>Title: </label>
<div class="row">
<div class="col-lg-6">
<label class="option option-plain">
<span class="option-control">
<span class="radio">
<input type="radio" name="title_option" value="0" checked="checked" />
<span></span>
</span>
</span>
<span class="option-label">
<span class="option-head">
<span class="option-title">
Key Pair
</span>
</span>
<span class="option-body">
Description
</span>
</span>
</label>
</div>
<div class="col-lg-6">
<label class="option option option-plain">
<span class="option-control">
<span class="radio">
<input type="radio" name="title_option" value="1" />
<span></span>
</span>
</span>
<span class="option-label">
<span class="option-head">
<span class="option-title">
Key Pair
</span>
</span>
<span class="option-body">
Description
</span>
</span>
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Signing Key: </label>
<select class="selectpicker form-control key" title="key">
<option>Key</option>
</select>
<span class="description">Description</span>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Encryption Key: </label>
<select class="selectpicker form-control key" title="key">
<option>Key</option>
</select>
<span class="description">Description</span>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(".key").prop('disabled', true);
$("input[type=radio][name=title_option]").change(function () {
console.log($(this).val());
if ($(this).val() == 0) {
$(".key").prop('disabled', true);
} else {
$(".key").prop('disabled', false);
}
});
});
</script>
Your code is working fine once I included the jQuery. Please see the result.
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<body>
<div class="card-body">
#*Title*#
<div class="form-group">
<label>Title: </label>
<div class="row">
<div class="col-lg-6">
<label class="option option-plain">
<span class="option-control">
<span class="radio">
<input
type="radio"
name="title_option"
value="0"
checked="checked"
/>
<span></span>
</span>
</span>
<span class="option-label">
<span class="option-head">
<span class="option-title"> Key Pair </span>
</span>
<span class="option-body"> Description </span>
</span>
</label>
</div>
<div class="col-lg-6">
<label class="option option option-plain">
<span class="option-control">
<span class="radio">
<input type="radio" name="title_option" value="1" />
<span></span>
</span>
</span>
<span class="option-label">
<span class="option-head">
<span class="option-title"> Key Pair </span>
</span>
<span class="option-body"> Description </span>
</span>
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Signing Key: </label>
<select class="selectpicker form-control key" title="key">
<option>Key</option>
</select>
<span class="description">Description</span>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Encryption Key: </label>
<select class="selectpicker form-control key" title="key">
<option>Key</option>
</select>
<span class="description">Description</span>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(".key").prop("disabled", true);
$("input[type=radio][name=title_option]").change(function () {
//console.log($(this).val());
if ($(this).val() == 0) {
$(".key").prop("disabled", true);
} else {
$(".key").prop("disabled", false);
}
});
});
</script>
</div>
</body>
</head>
</html>
I am trying to make a math quiz game for my classroom. I have created a page to select the type of game the user wants. I have created a function to select the the element when it is clicked to change colors but it is not changing colors. I have tried to hard code the styling and it works properly but I only want the styling when the radio container is selected.
const startForm = document.getElementById('start-form');
const radioContainers = document.querySelectorAll('.radio-container');
const radioInputs = document.querySelectorAll('input');
const bestScores = document.querySelectorAll('.best-score-value');
startForm.addEventListener('click', () => {
radioContainers.forEach((radioEl) => {
radioEl.classList.remove('selected-label');
if (radioEl.childeren[1].checked) {
radioEl.classList.add('selected-label');
}
});
});
RADIO CONTAINER TO BE SELECTED
<div class="radio-container">
<label for="value-99">99 Questions</label>
<input type="radio" name="Questions" value="99" id="value-99">
<span class="best-score">
<span>Best Score</span>
<span class="best-score-value">0.0</span>
</span>
</div>
I think you mean this
Delegation from startForm is fine, then we can loop over the divs to see if the radio in the div was checked
const startForm = document.getElementById('start-form');
const radioContainers = document.querySelectorAll('.radio-container');
startForm.addEventListener('click', (e) => {
const tgt = e.target;
if (tgt.name === "Questions") {
const parent = tgt.closest('.radio-container')
radioContainers.forEach(container => container.classList.toggle('selected-label', container === parent && tgt.checked))
}
});
.selected-label { color: green }
<form id="start-form">
<div class="radio-container">
<label for="value-99">99 Questions</label>
<input type="radio" name="Questions" value="99" id="value-99">
<span class="best-score">Best Score</span>
<span class="best-score-value">0.0</span>
</div>
<div class="radio-container">
<label for="value-99">99 Questions</label>
<input type="radio" name="Questions" value="99" id="value-99">
<span class="best-score">Best Score</span>
<span class="best-score-value">0.0</span>
</div>
</form>
Question is somewhat a duplicate.
change label color radio when checked
I got the answer from here, and it can be done using CSS without needing to use JavaScript.
(Notice some buttons have different colors when clicked)
Here's a snippet
input[type="radio"]:checked ~ span
{
color:red;
}
input[type="radio"]:checked.correct ~ span
{
color:green;
}
<form id="start-form">
<div class="radio-container">
<label for="value-99">99 Questions</label>
<input type="radio" name="Questions" value="99" id="value-99">
<span class="best-score">Best Score</span>
<span class="best-score-value">0.0</span>
</div>
<div class="radio-container">
<label for="value-99">99 Questions</label>
<input type="radio" name="Questions" value="99" id="value-99" class = "correct">
<span class="best-score">Best Score</span>
<span class="best-score-value">0.0</span>
</div>
<div class="radio-container">
<label for="value-99">99 Questions</label>
<input type="radio" name="Questions" value="99" id="value-99">
<span class="best-score">Best Score</span>
<span class="best-score-value">0.0</span>
</div>
<div class="radio-container">
<label for="value-99">99 Questions</label>
<input type="radio" name="Questions" value="99" id="value-99" class = "correct">
<span class="best-score">Best Score</span>
<span class="best-score-value">0.0</span>
</div>
</form>
I have a problem with jquery. Have a project like Task List on the web.
I trying to remove the product from in progress div and insert into complete div and vice versa.
But have a problem when I find an object via .closest() I unable to append some HTML div, but .remove() work correctly.
How I can append some HTML else? or what wrong I do?
$(document).ready(function() {
$("input:checkbox").change(function() {
var product_id = $(this).attr('id');
var complete = $(this).closest('#complete');
var progress = $(this).closest('#progress');
var prod = $(this).closest('#product');
//console.log(product_id);
var data = ' <div id="product" class="col-lg-3 no-gutter"><div class="custom-control form-control-lg custom-checkbox"><input type="checkbox" class="custom-control-input" id="' + product_id + '"> <label class="custom-control-label" for="' + product_id + '"></label></div>';
if ($(this).is(":checked")) {
//data is already html product div
prod.remove();
complete.append(data);
//console.log('done check in');
} else {
prod.remove();
progress.append(data);
//console.log('done check OUT');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="datess">16-11-20
<div id="progress" class="in-progress">In progress
<div id="Marja">
<h4>
<p class="badge badge-secondary">
Marja
</p>
</h4>
<div id="product" class="col-lg-3 no-gutter">
product1
<div class="custom-control form-control-lg custom-checkbox">
<input type="checkbox" class="custom-control-input" id="102">
<label class="custom-control-label" for="102"></label>
</div>
</div>
</div>
<!--end product-info-->
</div>
<!--e-co-product-->
<hr class="divider">
<div id="complete" class="complete">Сomplete
<div id="Juh">
<h4>
<p class="badge badge-secondary">
Juh
</p>
</h4>
<div id="product" class="col-lg-3 no-gutter">
product2
<div class="custom-control form-control-lg custom-checkbox">
<input type="checkbox" class="custom-control-input" id="103" checked>
<label class="custom-control-label" for="103"></label>
</div>
</div>
</div>
<!--end product-info-->
</div>
</div>
<!--product-->
<hr class="divider">
<hr class="divider">
<div class="datess">17-11-20
<div id="progress" class="in-progress">In progress
<div id="Marja">
<h4>
<p class="badge badge-secondary">
Marja
</p>
</h4>
<div id="product" class="col-lg-3 no-gutter">
product1
<div class="custom-control form-control-lg custom-checkbox">
<input type="checkbox" class="custom-control-input" id="102">
<label class="custom-control-label" for="102"></label>
</div>
</div>
</div>
<!--end product-info-->
</div>
<!--e-co-product-->
<hr class="divider">
<div id="complete" class="complete">Сomplete
<div id="Juh">
<h4>
<p class="badge badge-secondary">
Juh
</p>
</h4>
<div id="product" class="col-lg-3 no-gutter">
product2
<div class="custom-control form-control-lg custom-checkbox">
<input type="checkbox" class="custom-control-input" id="103" checked>
<label class="custom-control-label" for="103"></label>
</div>
</div>
</div>
<!--end product-info-->
</div>
</div>
I'm using Tampermonkey to check checkboxes. The way it's laid out is there's multiple 'Items', each with the same set of checkboxes. I'm trying to have the checkbox pre-selected based on a combination of the checkbox value and the ID (or even title, if that's more ideal).
Currently if I use the below, it will select the checkbox but it will do so for Item 1, Item 2, Item 3 and so on when I need to select different options for each. I'm trying to figure out how I go about narrowing the selection based on the ID (122) or even the title (Item 1)?
$("input:checkbox[value='See Notes']").attr("checked", true);
This is what my HTML looks like for each item:
<div class="field tabular">
<span class="item-data">{"Id":"122"}</span>
<div class="field-content">
<div class="title" title="Item 1">Item 1</div>
<div class="data">
<div class="errors"></div>
<div class="control">
<div class="option">
<input id="checkbox_3668-1523196351429_option0" type="checkbox" value="Checked & Okay">
<label for="checkbox_3668-1523196351429_option0">Checked & Okay</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option1" type="checkbox" value="Repair Required">
<label for="checkbox_3668-1523196351429_option1">Repair Required</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option2" type="checkbox" value="See Notes">
<label for="checkbox_3668-1523196351429_option2">See Notes</label>
</div>
<!-- Etc... -->
You can do something like:
$('[title="Item 1"]') //Select elemements with attribute title="Item 1"
.next() //Select the next element, which is div with class .data
.find("input:checkbox[value='" + value + "']") //Find checkbox with the value
.prop("checked", true); //Set the prop checked to true
Here is a snippet:
var item = 'Item 1';
var value = 'See Notes';
$('[title="' + item + '"]').next().find("input:checkbox[value='" + value + "']").prop("checked", true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field tabular">
<span class="item-data">{"Id":"122"}</span>
<div class="field-content">
<div class="title" title="Item 1">Item 1</div>
<div class="data">
<div class="errors"></div>
<div class="control">
<div class="option">
<input id="checkbox_3668-1523196351429_option0" type="checkbox" value="Checked & Okay">
<label for="checkbox_3668-1523196351429_option0">Checked & Okay</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option1" type="checkbox" value="Repair Required">
<label for="checkbox_3668-1523196351429_option1">Repair Required</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option2" type="checkbox" value="See Notes">
<label for="checkbox_3668-1523196351429_option2">See Notes</label>
</div>
</div>
</div>
</div>
</div>
<br />
<br />
<div class="field tabular">
<span class="item-data">{"Id":"123"}</span>
<div class="field-content">
<div class="title" title="Item 2">Item 2</div>
<div class="data">
<div class="errors"></div>
<div class="control">
<div class="option">
<input id="checkbox_3668-1523196351429_option0" type="checkbox" value="Checked & Okay">
<label for="checkbox_3668-1523196351429_option0">Checked & Okay</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option1" type="checkbox" value="Repair Required">
<label for="checkbox_3668-1523196351429_option1">Repair Required</label>
</div>
<div class="option">
<input id="checkbox_3668-1523196351429_option2" type="checkbox" value="See Notes">
<label for="checkbox_3668-1523196351429_option2">See Notes</label>
</div>
</div>
</div>
</div>
</div>
I have a div with some radio buttons, and the input names are cty_1. If i add more div the input names inside that divs should become cty_2, cty_3, etc.respectively.
Here's my code:
<div class="category">
<div class="col-md-6">
<input type="radio" name="cty_1" id="1" value="car">
<label for="1">car</label>
</div>
<div class="col-md-6">
<input type="radio" name="cty_1" id="2" value="bike">
<label for="2">bike</label>
</div>
</div>
If another div is added, i want that like
<div class="category">
<div class="col-md-6">
<input type="radio" name="cty_1" id="1" value="car">
<label for="1">car</label>
</div>
<div class="col-md-6">
<input type="radio" name="cty_1" id="2" value="bike">
<label for="2">bike</label>
</div>
</div>
<div class="category">
<div class="col-md-6">
<input type="radio" name="cty_2" id="3" value="phone">
<label for="3">phone</label>
</div>
<div class="col-md-6">
<input type="radio" name="cty_2" id="4" value="computer">
<label for="4">computer</label>
</div>
</div>
NB: i don't know javascript.
If you're using jQuery then this is pretty easy. Using the following code, every time you click "Go" a new category element will be appended and the name and id attributes will increment:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
<div class="container">
<btn class="btn btn-primary">Go</btn>
<div class="category">
<div class="col-md-6">
<input type="radio" name="cty_1" id="1" value="car">
<label for="1">car</label>
</div>
<div class="col-md-6">
<input type="radio" name="cty_1" id="2" value="bike">
<label for="2">bike</label>
</div>
</div>
</div>
</body>
<script>
$('.btn-primary').on('click',function(){
var idx = parseInt($('.category').last().index())+1;
$('.category')
.last()
.clone()
.find('input[type=radio]')
.each(function(index){
$(this)
.attr('name','cty_' + idx)
.attr('id','cty_' + idx + "_" + index)
.parent()
.find('label')
.attr('for','cty_' + idx + "_" + index)
.end()
})
.end()
.insertAfter($('.category').last());
});
</script>
Try this: updated fiddle
//Html
<div id="divMain">
</div>
//jQuery Code
var valuesArr=["car","bike","truck","Test4","Test5"];
var cityCounter=1;
var idCounter=1;
var addCategoryFlag=false;
function CallHtml(){
var html="";
for(var i=0;i<valuesArr.length;i++){
if(idCounter%2!=0){
html+='<div class="category">';
}
else{
addCategoryFlag=true;
}
html+='<div class="col-md-6">';
html+=' <input type="radio" name="cty_'+cityCounter+'" id="'+idCounter+'" value="'+valuesArr[i]+'">';
html+=' <label for="'+idCounter+'">'+valuesArr[i]+'</label>';
html+='</div>';
if(addCategoryFlag){
html+='</div>';
addCategoryFlag=false;
cityCounter++;
}
idCounter++;
}
$("#divMain").html(html);
}
CallHtml();