无法在特定的 blogspot 执行 javascript,但它在其他 blogspot 中工作
Unable to execute javascript at a perticulat blogspot, but it work in other blogspot
我在 blog. But, I am unable to execute JavaScript at a particular blogspot site. Please have a look at bra calculator. Why it does not work at this spa 网站上成功执行了 JavaScript?博客上有没有JS停止执行?任何 CSS 问题?请帮我弄清楚这个问题。
我没有收到任何错误消息。
<form id="bra-calculator">
<div class="title">
Enter measurements in inches</div>
<div class="half">
<label for="rib-measurement">Enter rib measurement:</label>
<input id="rib-measurement" name="rib-measurement" placeholder="Rib Measurement" type="number" />
<div class="error-message">
Please enter a value greater than or equal to 24</div>
</div>
<div class="half">
<label for="bust-measurement">Enter bust measurement:</label>
<input id="bust-measurement" name="bust-measurement" placeholder="Cup Measurement" type="number" />
<div class="error-message">
Your bust measurement must be at least 1 inch larger than rib</div>
</div>
<input id="submit" type="submit" value="Calculate!" />
</form>
<div id="bra-results">
</div>
对于 JS:
var bra_calculator = bra_calculator || (function() {
var inputs = document.getElementsByTagName('input'),
ribs_input = document.getElementById('rib-measurement'),
bust_input = document.getElementById('bust-measurement'),
validation_flag = false,
results_div = document.getElementById('bra-results');
function results_message(message) {
results_div.innerHTML = message;
}
function find_sibling(input) {
return input.nextSibling.nextSibling;
}
function add_error(input) {
input.classList.add('error');
find_sibling(input).classList.add('show');
}
function remove_error(input) {
input.classList.remove('error');
find_sibling(input).classList.remove('show');
}
function error_checker(input) {
if (input.value == 0) {
add_error(input);
} else {
if (input.type.toLowerCase() === 'number') {
remove_error(input);
}
}
}
function validator() {
// check for empty values
for (i = 0; i < inputs.length; ++i) {
error_checker(inputs[i]);
}
// rib measurement should be be >= 24
if (ribs_input.value < 24) {
add_error(ribs_input);
} else {
remove_error(ribs_input);
}
// bust should be at least 1 inch greater than ribs!
if (bust_input.value !== '' && ribs_input.value !== '') {
if (Number(bust_input.value) <= Number(ribs_input.value)) {
add_error(bust_input);
} else {
remove_error(bust_input);
}
}
if (!ribs_input.classList.contains('error') && !bust_input.classList.contains('error')) {
validation_flag = true;
} else {
validation_flag = false;
results_message('');
}
if (validation_flag) {
var cup_sizes = ['A', 'B', 'C', 'D', 'DD', 'E', 'F', 'FF', 'G', 'GG', 'H', 'HH', 'J', 'JJ', 'K', 'KK', 'L', 'LL', 'M',
'MM', 'N', 'O', 'OO'],
bust = Math.ceil(bust_input.value),
ribs = Math.ceil(ribs_input.value),
difference = (bust - ribs) - 1;
if (cup_sizes[difference] === null) {
results_message('Your size is out-of-range! Please try again.');
} else {
results_message('Your calculated size is: <span>' + ribs + cup_sizes[difference] + '</span>');
}
}
}
return {
validator: validator
}
})();
(function() {
document.getElementById('bra-calculator').addEventListener('submit', function(e) {
e.preventDefault();
bra_calculator.validator();
});
})();
我的问题是为什么它适用于一个而不适用于另一个?请单击这两个链接并查看不同之处。
我在 https://srilanka-massage.blogspot.com/p/bra-size-calculator.html
上看到以下错误
这告诉我我们需要修改:
function remove_error(input) {
input.classList.remove('error');
let sibling = find_sibling(input);
if (sibling){
sibling.classList.remove('show');
}
}
或者其他类似的错误处理。 (或者找出为什么没有找到兄弟姐妹,可能是 HTML 结构问题?)
我在 CodePen 中复制了这个问题:https://codepen.io/Alexander9111/pen/vYOBero
真正的错误是 <div id="bra-results"></div>
在站点 https://srilanka-massage.blogspot.com/p/bra-size-calculator.html
上丢失
当我在表单后添加这个标签时,一切正常:
但是,您的代码仍然产生其他错误。
您的函数 function find_sibling(input)
没有返回您期望的节点。
您应该将其更改为:
function find_sibling(input) {
if (input.id.includes('measurement')){
return input.parentNode.querySelector('div');
} else {
return input.nextSibling.nextSibling;
}
}
您还应该更改:
function add_error(input) {
input.classList.add('error');
let sibling = find_sibling(input);
if (sibling.classList){
find_sibling(input).classList.add('show');
}
}
然后像我说的那样在表格后面添加 HTML: <div id="bra-results"></div>
,那么一切都应该有效:)
查看我的 CodePen 以获得完整的演示和完整代码:https://codepen.io/Alexander9111/pen/vYOBero
我在 blog. But, I am unable to execute JavaScript at a particular blogspot site. Please have a look at bra calculator. Why it does not work at this spa 网站上成功执行了 JavaScript?博客上有没有JS停止执行?任何 CSS 问题?请帮我弄清楚这个问题。
我没有收到任何错误消息。
<form id="bra-calculator">
<div class="title">
Enter measurements in inches</div>
<div class="half">
<label for="rib-measurement">Enter rib measurement:</label>
<input id="rib-measurement" name="rib-measurement" placeholder="Rib Measurement" type="number" />
<div class="error-message">
Please enter a value greater than or equal to 24</div>
</div>
<div class="half">
<label for="bust-measurement">Enter bust measurement:</label>
<input id="bust-measurement" name="bust-measurement" placeholder="Cup Measurement" type="number" />
<div class="error-message">
Your bust measurement must be at least 1 inch larger than rib</div>
</div>
<input id="submit" type="submit" value="Calculate!" />
</form>
<div id="bra-results">
</div>
对于 JS:
var bra_calculator = bra_calculator || (function() {
var inputs = document.getElementsByTagName('input'),
ribs_input = document.getElementById('rib-measurement'),
bust_input = document.getElementById('bust-measurement'),
validation_flag = false,
results_div = document.getElementById('bra-results');
function results_message(message) {
results_div.innerHTML = message;
}
function find_sibling(input) {
return input.nextSibling.nextSibling;
}
function add_error(input) {
input.classList.add('error');
find_sibling(input).classList.add('show');
}
function remove_error(input) {
input.classList.remove('error');
find_sibling(input).classList.remove('show');
}
function error_checker(input) {
if (input.value == 0) {
add_error(input);
} else {
if (input.type.toLowerCase() === 'number') {
remove_error(input);
}
}
}
function validator() {
// check for empty values
for (i = 0; i < inputs.length; ++i) {
error_checker(inputs[i]);
}
// rib measurement should be be >= 24
if (ribs_input.value < 24) {
add_error(ribs_input);
} else {
remove_error(ribs_input);
}
// bust should be at least 1 inch greater than ribs!
if (bust_input.value !== '' && ribs_input.value !== '') {
if (Number(bust_input.value) <= Number(ribs_input.value)) {
add_error(bust_input);
} else {
remove_error(bust_input);
}
}
if (!ribs_input.classList.contains('error') && !bust_input.classList.contains('error')) {
validation_flag = true;
} else {
validation_flag = false;
results_message('');
}
if (validation_flag) {
var cup_sizes = ['A', 'B', 'C', 'D', 'DD', 'E', 'F', 'FF', 'G', 'GG', 'H', 'HH', 'J', 'JJ', 'K', 'KK', 'L', 'LL', 'M',
'MM', 'N', 'O', 'OO'],
bust = Math.ceil(bust_input.value),
ribs = Math.ceil(ribs_input.value),
difference = (bust - ribs) - 1;
if (cup_sizes[difference] === null) {
results_message('Your size is out-of-range! Please try again.');
} else {
results_message('Your calculated size is: <span>' + ribs + cup_sizes[difference] + '</span>');
}
}
}
return {
validator: validator
}
})();
(function() {
document.getElementById('bra-calculator').addEventListener('submit', function(e) {
e.preventDefault();
bra_calculator.validator();
});
})();
我的问题是为什么它适用于一个而不适用于另一个?请单击这两个链接并查看不同之处。
我在 https://srilanka-massage.blogspot.com/p/bra-size-calculator.html
上看到以下错误这告诉我我们需要修改:
function remove_error(input) {
input.classList.remove('error');
let sibling = find_sibling(input);
if (sibling){
sibling.classList.remove('show');
}
}
或者其他类似的错误处理。 (或者找出为什么没有找到兄弟姐妹,可能是 HTML 结构问题?)
我在 CodePen 中复制了这个问题:https://codepen.io/Alexander9111/pen/vYOBero
真正的错误是 <div id="bra-results"></div>
在站点 https://srilanka-massage.blogspot.com/p/bra-size-calculator.html
当我在表单后添加这个标签时,一切正常:
但是,您的代码仍然产生其他错误。
您的函数 function find_sibling(input)
没有返回您期望的节点。
您应该将其更改为:
function find_sibling(input) {
if (input.id.includes('measurement')){
return input.parentNode.querySelector('div');
} else {
return input.nextSibling.nextSibling;
}
}
您还应该更改:
function add_error(input) {
input.classList.add('error');
let sibling = find_sibling(input);
if (sibling.classList){
find_sibling(input).classList.add('show');
}
}
然后像我说的那样在表格后面添加 HTML: <div id="bra-results"></div>
,那么一切都应该有效:)
查看我的 CodePen 以获得完整的演示和完整代码:https://codepen.io/Alexander9111/pen/vYOBero