文胸尺码计算器 'addEventListener' 为空
Bra size calculator 'addEventListener' of null
我一直在研究这个胸罩尺寸计算器，但是当 运行 这段代码时出现 addEventListener null 错误。当 运行 在本地时它工作正常但当我部署它时它会变得疯狂。我什至尝试将 addEventListener 放入 bra_size_calculator 函数中，但仍然给了我同样的错误。我不确定我错过了什么。
JS
window.onload = function () {
var bra_size_calculator = (function(){
var size_diff = {
1: 'A',
2: 'B',
3: 'C',
4: 'D',
5: 'DD/E',
6: 'F(DDD)/FF',
7: 'G/GG',
8: 'H/HH',
9: 'I/J',
10: 'J/JJ',
11: 'K',
12: 'L',
13: 'M',
14: 'N',
};
var band_size = [28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56],
fixResultStr = 'Your Result is = ',
loadingScreen = document.querySelector('.loading_screen');
function displayResult() {
var bandInput = document.querySelector("input[name='band']").value,
sizeSet,
cupInput = document.querySelector("input[name='cup']").value;
var bandVal = validateBand(bandInput),
cupVal = validateCup(bandVal, cupInput);
if (bandVal && cupVal) {
var valDiff = (cupVal - bandVal).toString(),
noResult = document.querySelector('.no_result');
if (!size_diff[valDiff]) {
noResult.innerHTML = '';
loadingScreen.classList.add('active');
setTimeout(function () {
noResult.innerHTML = 'Could not find a suggested result for you. Enter other values.';
loadingScreen.classList.remove('active');
}, 700);
} else {
noResult.innerHTML = '';
sizeSet = [bandVal.toString(), size_diff[valDiff]];
}
}
var resultHtml = document.querySelector('.result_text'),
redirectButtons = document.querySelector('.redirect_buttons');
if (sizeSet.length < 1) {
resultHtml.innerHTML = '';
redirectButtons.innerHTML = '';
} else {
resultHtml.innerHTML = '';
redirectButtons.innerHTML = '';
loadingScreen.classList.add('active');
setTimeout(function () {
resultHtml.innerHTML = fixResultStr + sizeSet[0] + sizeSet[1];
showRedirectButtons(sizeSet, redirectButtons);
loadingScreen.classList.remove('active');
}, 700);
}
};
function showRedirectButtons(sizeset, redirectbuttons) {
var possibleSizes = sizeset[1].split(/[()\/]+/);
possibleSizes.forEach(function (cup) {
var ahref = document.createElement('a');
ahref.setAttribute('class', 'result_redirect');
ahref.setAttribute('href', '/collections/' + sizeset[0] + cup);
ahref.innerHTML = `Shop Bras for Size ${sizeset[0]}${cup}`;
redirectbuttons.appendChild(ahref);
});
};
function validateBand(value) {
var errMsg = document.querySelector('.band_error_msg');
if (!value) errMsg.innerHTML = 'This field cannot be empty';
else {
var valNum = parseInt(value);
if (isNaN(valNum) || valNum < 28 || valNum > 56) {
errMsg.innerHTML = 'Please enter a number between 28 and 56';
} else {
errMsg.innerHTML = '';
return estimateBand(valNum, errMsg);
}
}
return null;
};
function validateCup(bandVal, value) {
var errMsg = document.querySelector('.cup_error_msg');
if (!bandVal) {
errMsg.innerHTML = 'Cannot validate; Band size is invalid';
return null;
} else {
if (!value) errMsg.innerHTML = 'This field cannot be empty';
else {
var valNum = parseInt(value);
if (isNaN(valNum)) errMsg.innerHTML = 'Invalid input; it must be a number';
else if (valNum <= bandVal) errMsg.innerHTML = 'Cup size must be greater than the band size';
else {
errMsg.innerHTML = '';
return valNum;
}
}
}
return null;
};
function estimateBand(value, errMsg) {
var newVal = value,
foundIt = band_size.includes(value);
if (foundIt) return value;
else {
while (!foundIt) {
newVal += 1;
if (newVal > 56) break;
foundIt = band_size.includes(newVal);
}
errMsg.innerHTML = `Band size ${value} is rounded up to the nearest existing size of ${newVal}`;
document.querySelector("input[name='band']").value = newVal;
return newVal;
}
};
return {
displayResult: displayResult
}
})();
(function() {
document.querySelector('#measureForm button').addEventListener('click', function (event) {
event.preventDefault();
bra_size_calculator.displayResult();
});
})();
};
HTML
<div class="row" id="desktopContainer">
<div class="col-xs-12 m-top-sm text-left">
<h3 class="text-center braFitTitle">
<span style="font-weight: bold">How To Measure Your Bra Size</span>
</h3>
<div class="row m-top-lg">
<div class="col-xs-6">
<img src="#" class="lazy-extended already-loaded main-image" data-original="/images/espots/030718ec_bra_measure_guide_00012138.jpg" alt="Bra Fit Guide">
</div>
<div class="col-xs-6">
<div class="measurements">
<form id="bra-size-calculator" class="measurement-form">
<div class="size-fields">
<div class="inst-1">
<h3>1. Measure Your Cup Size</h3>
<p>
Put on your best-fitting non-padded bra. Using a measuring tape, measure
around the fullest part of your bust. Make sure the tape is leveled, not too
tight, and straight around your back.
</p>
<input class="measure_input" type="number" name="cup" id="cup-size" placeholder="Cup Measurement Inches">
<div class="cup_error_msg"></div>
</div>
<div class="inst-2">
<h3>2. Measure Your Band Size</h3>
<p>
Using a measuring tape, measure around your ribcage, just beneath your bust,
on an exhale. Make sure the tape is pulled snug, leveled and straight around
your back.
</p>
<div class="col p-0 d-flex mt-4 justify-content-between">
<div class="cup">
<input class="measure_input" type="number" name="band" id="band-size" placeholder="Band Measurement Inches">
<div class="band_error_msg"></div>
</div>
<div class="submit-btn">
<button type="submit" id="submit" class="measure_submit navigable" name="submit">
Get My Size
</button>
</div>
</div>
</div>
</div>
</form>
<div class="result_section">
<div class="no_result"></div>
<h2 class="result_text" data-open-accessibility-text-original="32.3px" style="font-size: 32.3px"></h2>
<div class="redirect_buttons"></div>
</div>
</div>
<div class="loading_screen">
<img src="//cdn.shopify.com/s/files/1/0469/3517/9429/t/6/assets/loading.gif?v=14919295063927105620">
</div>
<div id="modal-brafit-content" style="display: none"><p>YO</p></div>
<div id="quiz-content" class="text-center mt-5">
<span class="quiz_txt white-txt" id="quiz_txt">Is your bra size letting you down? Answer just a few questions so that we can help
recommend the fit of your bra</span><br>
<button type="button" class="btn btn-primary btn-lg white" id="modal-brafit-btn">
Start Bra Fit Quiz
</button>
</div>
</div>
</div>
</div>
</div>
您正在将事件侦听器添加到 document.querySelector('#measureForm button')。但是，您的 HTML 中没有带有“measureForm”ID 的元素。因此，document.querySelector returns null.
因此，您只需将“measureForm”ID 添加到您尝试添加侦听器的元素，或更改 document.querySelector('#measureForm button') 中使用的选择器。
我一直在研究这个胸罩尺寸计算器，但是当 运行 这段代码时出现 addEventListener null 错误。当 运行 在本地时它工作正常但当我部署它时它会变得疯狂。我什至尝试将 addEventListener 放入 bra_size_calculator 函数中，但仍然给了我同样的错误。我不确定我错过了什么。
JS
window.onload = function () {
var bra_size_calculator = (function(){
var size_diff = {
1: 'A',
2: 'B',
3: 'C',
4: 'D',
5: 'DD/E',
6: 'F(DDD)/FF',
7: 'G/GG',
8: 'H/HH',
9: 'I/J',
10: 'J/JJ',
11: 'K',
12: 'L',
13: 'M',
14: 'N',
};
var band_size = [28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56],
fixResultStr = 'Your Result is = ',
loadingScreen = document.querySelector('.loading_screen');
function displayResult() {
var bandInput = document.querySelector("input[name='band']").value,
sizeSet,
cupInput = document.querySelector("input[name='cup']").value;
var bandVal = validateBand(bandInput),
cupVal = validateCup(bandVal, cupInput);
if (bandVal && cupVal) {
var valDiff = (cupVal - bandVal).toString(),
noResult = document.querySelector('.no_result');
if (!size_diff[valDiff]) {
noResult.innerHTML = '';
loadingScreen.classList.add('active');
setTimeout(function () {
noResult.innerHTML = 'Could not find a suggested result for you. Enter other values.';
loadingScreen.classList.remove('active');
}, 700);
} else {
noResult.innerHTML = '';
sizeSet = [bandVal.toString(), size_diff[valDiff]];
}
}
var resultHtml = document.querySelector('.result_text'),
redirectButtons = document.querySelector('.redirect_buttons');
if (sizeSet.length < 1) {
resultHtml.innerHTML = '';
redirectButtons.innerHTML = '';
} else {
resultHtml.innerHTML = '';
redirectButtons.innerHTML = '';
loadingScreen.classList.add('active');
setTimeout(function () {
resultHtml.innerHTML = fixResultStr + sizeSet[0] + sizeSet[1];
showRedirectButtons(sizeSet, redirectButtons);
loadingScreen.classList.remove('active');
}, 700);
}
};
function showRedirectButtons(sizeset, redirectbuttons) {
var possibleSizes = sizeset[1].split(/[()\/]+/);
possibleSizes.forEach(function (cup) {
var ahref = document.createElement('a');
ahref.setAttribute('class', 'result_redirect');
ahref.setAttribute('href', '/collections/' + sizeset[0] + cup);
ahref.innerHTML = `Shop Bras for Size ${sizeset[0]}${cup}`;
redirectbuttons.appendChild(ahref);
});
};
function validateBand(value) {
var errMsg = document.querySelector('.band_error_msg');
if (!value) errMsg.innerHTML = 'This field cannot be empty';
else {
var valNum = parseInt(value);
if (isNaN(valNum) || valNum < 28 || valNum > 56) {
errMsg.innerHTML = 'Please enter a number between 28 and 56';
} else {
errMsg.innerHTML = '';
return estimateBand(valNum, errMsg);
}
}
return null;
};
function validateCup(bandVal, value) {
var errMsg = document.querySelector('.cup_error_msg');
if (!bandVal) {
errMsg.innerHTML = 'Cannot validate; Band size is invalid';
return null;
} else {
if (!value) errMsg.innerHTML = 'This field cannot be empty';
else {
var valNum = parseInt(value);
if (isNaN(valNum)) errMsg.innerHTML = 'Invalid input; it must be a number';
else if (valNum <= bandVal) errMsg.innerHTML = 'Cup size must be greater than the band size';
else {
errMsg.innerHTML = '';
return valNum;
}
}
}
return null;
};
function estimateBand(value, errMsg) {
var newVal = value,
foundIt = band_size.includes(value);
if (foundIt) return value;
else {
while (!foundIt) {
newVal += 1;
if (newVal > 56) break;
foundIt = band_size.includes(newVal);
}
errMsg.innerHTML = `Band size ${value} is rounded up to the nearest existing size of ${newVal}`;
document.querySelector("input[name='band']").value = newVal;
return newVal;
}
};
return {
displayResult: displayResult
}
})();
(function() {
document.querySelector('#measureForm button').addEventListener('click', function (event) {
event.preventDefault();
bra_size_calculator.displayResult();
});
})();
};
HTML
<div class="row" id="desktopContainer">
<div class="col-xs-12 m-top-sm text-left">
<h3 class="text-center braFitTitle">
<span style="font-weight: bold">How To Measure Your Bra Size</span>
</h3>
<div class="row m-top-lg">
<div class="col-xs-6">
<img src="#" class="lazy-extended already-loaded main-image" data-original="/images/espots/030718ec_bra_measure_guide_00012138.jpg" alt="Bra Fit Guide">
</div>
<div class="col-xs-6">
<div class="measurements">
<form id="bra-size-calculator" class="measurement-form">
<div class="size-fields">
<div class="inst-1">
<h3>1. Measure Your Cup Size</h3>
<p>
Put on your best-fitting non-padded bra. Using a measuring tape, measure
around the fullest part of your bust. Make sure the tape is leveled, not too
tight, and straight around your back.
</p>
<input class="measure_input" type="number" name="cup" id="cup-size" placeholder="Cup Measurement Inches">
<div class="cup_error_msg"></div>
</div>
<div class="inst-2">
<h3>2. Measure Your Band Size</h3>
<p>
Using a measuring tape, measure around your ribcage, just beneath your bust,
on an exhale. Make sure the tape is pulled snug, leveled and straight around
your back.
</p>
<div class="col p-0 d-flex mt-4 justify-content-between">
<div class="cup">
<input class="measure_input" type="number" name="band" id="band-size" placeholder="Band Measurement Inches">
<div class="band_error_msg"></div>
</div>
<div class="submit-btn">
<button type="submit" id="submit" class="measure_submit navigable" name="submit">
Get My Size
</button>
</div>
</div>
</div>
</div>
</form>
<div class="result_section">
<div class="no_result"></div>
<h2 class="result_text" data-open-accessibility-text-original="32.3px" style="font-size: 32.3px"></h2>
<div class="redirect_buttons"></div>
</div>
</div>
<div class="loading_screen">
<img src="//cdn.shopify.com/s/files/1/0469/3517/9429/t/6/assets/loading.gif?v=14919295063927105620">
</div>
<div id="modal-brafit-content" style="display: none"><p>YO</p></div>
<div id="quiz-content" class="text-center mt-5">
<span class="quiz_txt white-txt" id="quiz_txt">Is your bra size letting you down? Answer just a few questions so that we can help
recommend the fit of your bra</span><br>
<button type="button" class="btn btn-primary btn-lg white" id="modal-brafit-btn">
Start Bra Fit Quiz
</button>
</div>
</div>
</div>
</div>
</div>
您正在将事件侦听器添加到 document.querySelector('#measureForm button')。但是，您的 HTML 中没有带有“measureForm”ID 的元素。因此，document.querySelector returns null.
因此，您只需将“measureForm”ID 添加到您尝试添加侦听器的元素，或更改 document.querySelector('#measureForm button') 中使用的选择器。