【发布时间】：2021-04-10 05:40:15
【问题描述】：
<style>
.column {
float: left;
width: 50%;
padding: 10px;
}
/* Clear floats after the columns *
.row:after {
content: "";
display: table;
clear: both;
}
/* Container holding the image and the text */
.container {
position: relative;
}
/* Centered text */
.centered {
text-shadow: 0 0 2px, 0 0 5px, 0 0 50px, 0 0 10px, 0 0 60px, 0 0 60px;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
</style>
<h1>DESIGN YOUR OWN VIBE</h1>
<h3>Type in your message, choose font, and color.</h3>
<div class="column">
<div class="container">
<img style="box-shadow: 5px 5px 10px black;" src="https://omgneonsigns.com/wp-content/plugins/neon-designer-1.5.4/includes/image/background1.jpg" />
<div class="centered">
<p id="text" style="font-size: 45px; padding-right: 10px;"></p>
</div>
</div>
<h1>Total Cost:<span id="outputCost" style="font-size: 25px; padding-right: 10px;"></span></h1>
</div>
<div class="column" style="box-shadow: 5px 2px 55px gray;">
<h3>INPUT TEXT</h3>
<form action="/cart/?add-to-cart=5825" method="post" name="contentForm">
<p id="remainingChars"></p>
<textarea id="enteredText" style="height: 15px;" name="enteredText" onkeyup="grabText()" onkeydown="countChars(this)" placeholder="Your Text..."></textarea>
<input id="hiddenText" name="hiddenText" type="hidden" value=""></input>
<h3>CHOOSE FONT</h3>
<select name="chosenFont" onchange="changeFontStyle(this)">
<option value="select">-SELECT-</option>
<option style="font-family: 'roboto';" value="roboto">Roboto</option>
<option style="font-family: 'arial';" value="arial">Arial</option>
<option style="font-family: 'times new roman';" value="times new roman">Times New Roman</option>
<option style="font-family: 'comic sans ms';" value="comic sans ms">Comic Sans MS</option>
<option style="font-family: 'clarendon-fortune-bold';" value="clarendon fortune bold">Clarendon Fortune</option>
<option style="font-family: 'copperplate';" value="copperplate">Copperplate</option>
<option style="font-family: 'ribbon-condensed';" value="ribbon condensed">Ribbon Condensed</option>
</select>
<input id="hiddenFont" name="hiddenFont" type="hidden" value=""></input>
<h3>CHOOSE COLOR</h3>
<select id="selectedColor" name="chosenColor" onchange="changeColorStyle(this)">
<option value="select">-SELECT-</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
<option value="pink">Pink</option>
<option value="white">White</option>
<option value="yellow">Yellow</option>
<option value="#dce6ef">Ice Blue</option>
</select>
<input id="hiddenColor" name="hiddenColor" type="hidden" value="" />
<h3>CHOOSE SIZE</h3>
<select id="selectedSize" name="chosenSize" onchange="getTotal();">
<option value="select">-SELECT-</option>
<option value="20">20"</option>
<option value="30">30"</option>
<option value="40">40"</option>
<option value="50">50"</option>
<option value="60">60"</option>
</select>
<input id="hiddenSize" name="hiddenSize" type="hidden" value="" />
<h3>CHOOSE POWER WIRE</h3>
Power wire on back is recommended for professional installation by an electrician. Power wire on front is recommended for residential installation.
<select id="selectedPowerWire" name="chosenPower" onchange="getTotal();">
<option value="select">-SELECT-</option>
<option value="front">Power Wire In FRONT</option>
<option value="back">Power Wire In BACK</option>
</select>
<input id="hiddenPowerWire" name="hiddenPowerWire" type="hidden" value="" />
<h3>CHOOSE MOUNT</h3>
Wall mount is recommended for general installations. Hanging is recommended for window display.
<select id="selectedMount" name="chosenMount" onchange="getTotal();">
<option value="select">-SELECT-</option>
<option value="wall mount">Wall Mount</option>
<option value="hanging">Hanging</option>
<option value="stand">Stand</option>
</select>
<input id="hiddenMount" name="hiddenMount" type="hidden" value="" />
<h3>CHOOSE BACKING</h3>
<select id="selectedBacking" name="chosenBacking" onchange="getTotal();">
<option value="select">-SELECT-</option>
<option value="cut to shape">Cut To Shape</option>
<option value="whole board">Whole Board</option>
</select>
<input id="hiddenBacking" name="hiddenBacking" type="hidden" value="" />
<h3>DIMMER?</h3>
<select id="selectedDimmer" name="chosenDimmer" onchange="getTotal();">
<option value="select">-SELECT-</option>
<option value="yes">Yes ($50.00)</option>
<option value="no">No</option>
</select>
<input id="hiddenDimmer" name="hiddenDimmer" type="hidden" value="" />
<input id="price" name="price" type="hidden" value="" />
<input id="hiddenChars" name="hiddenChars" type="hidden" value="" />
<input type="submit" id="submitValues" value="Add To Cart" />
</form></div>
<script type="text/javascript">
$(document).ready(function grabText() {
var x = document.getElementById("enteredText").value;
document.getElementById("text").innerHTML = x;
getTotal();
});
var changeFontStyle = function (font) {
document.getElementById(
"text").style.fontFamily
= font.value;
};
var changeColorStyle = function (color) {
document.getElementById("text").style.color = color.value;
};
$(document).ready(function countChars(obj){
var maxLength = 20;
var strLength = obj.value.length + 1;
var charRemain = (maxLength - strLength);
document.getElementById("hiddenChars").value = strLength;
if(charRemain < 0){
document.getElementById("remainingChars").innerHTML = '<span style="color: red;">You have exceeded the limit of '+maxLength+' characters</span>';
}else{
document.getElementById("remainingChars").innerHTML = charRemain+' characters remaining';
}
});
$(document).ready(function getTotal() {
var z = document.getElementById("hiddenChars").value;
var x = document.getElementById("selectedSize").value;
var y = document.getElementById("selectedMount").value;
var d = document.getElementById("selectedDimmer").value;
if(x != "select" && z === "") {
document.getElementById("outputCost").innerHTML = ' Please enter custom text.';
document.getElementById("price").value = NULL;
document.getElementById("submitValues").disabled = true;
}
if(x === "20" && z === "1") {
document.getElementById("outputCost").innerHTML = ' $180';
document.getElementById("price").value = parseFloat("180.00");
}
if(x === "30" && z === "1") {
document.getElementById("outputCost").innerHTML = ' $263';
document.getElementById("price").value = parseFloat("263.00");
}
if(x === "40" && z === "1") {
document.getElementById("outputCost").innerHTML = ' $306';
document.getElementById("price").value = parseFloat("306.00");
}
if(x === "50" && z === "1") {
document.getElementById("outputCost").innerHTML = ' $330';
document.getElementById("price").value = parseFloat("330.00");
}
if(x === "60" && z === "1") {
document.getElementById("outputCost").innerHTML = ' $380';
document.getElementById("price").value = parseFloat("380.00");
}
if(x === "20" && z === "2") {
document.getElementById("outputCost").innerHTML = ' $200';
document.getElementById("price").value = parseFloat("200.00");
}
if(x === "30" && z === "2") {
document.getElementById("outputCost").innerHTML = ' $286';
document.getElementById("price").value = parseFloat("286.00");
}
if(x === "40" && z === "2") {
document.getElementById("outputCost").innerHTML = ' $332';
document.getElementById("price").value = parseFloat("332.00");
}
if(x === "50" && z === "2") {
document.getElementById("outputCost").innerHTML = ' $360';
document.getElementById("price").value = parseFloat("360.00");
}
if(x === "60" && z === "2") {
document.getElementById("outputCost").innerHTML = ' $410';
document.getElementById("price").value = parseFloat("410.00");
}
if(x === "20" && z === "3") {
document.getElementById("outputCost").innerHTML = ' $220';
document.getElementById("price").value = parseFloat("220.00");
}
if(x === "30" && z === "3") {
document.getElementById("outputCost").innerHTML = ' $309';
document.getElementById("price").value = parseFloat("309.00");
}
if(x === "40" && z === "3") {
document.getElementById("outputCost").innerHTML = ' $358';
document.getElementById("price").value = parseFloat("358.00");
}
if(x === "50" && z === "3") {
document.getElementById("outputCost").innerHTML = ' $480';
document.getElementById("price").value = parseFloat("480.00");
}
if(x === "60" && z === "3") {
document.getElementById("outputCost").innerHTML = ' $440';
document.getElementById("price").value = parseFloat("440.00");
}
if(x === "20" && z === "4") {
document.getElementById("outputCost").innerHTML = ' $240';
document.getElementById("price").value = parseFloat("240.00");
}
if(x === "30" && z === "4") {
document.getElementById("outputCost").innerHTML = ' $332';
document.getElementById("price").value = parseFloat("332.00");
}
if(x === "40" && z === "4") {
document.getElementById("outputCost").innerHTML = ' $384';
document.getElementById("price").value = parseFloat("384.00");
}
if(x === "50" && z === "4") {
document.getElementById("outputCost").innerHTML = ' $580';
document.getElementById("price").value = parseFloat("580.00");
}
if(x === "60" && z === "4") {
document.getElementById("outputCost").innerHTML = ' $470';
document.getElementById("price").value = parseFloat("470.00");
}
if(x === "20" && z === "5") {
document.getElementById("outputCost").innerHTML = ' $260';
document.getElementById("price").value = parseFloat("260.00");
}
if(x === "30" && z === "5") {
document.getElementById("outputCost").innerHTML = ' $355';
document.getElementById("price").value = parseFloat("355.00");
}
if(x === "40" && z === "5") {
document.getElementById("outputCost").innerHTML = ' $410';
document.getElementById("price").value = parseFloat("410.00");
}
if(x === "50" && z === "5") {
document.getElementById("outputCost").innerHTML = ' $458';
document.getElementById("price").value = parseFloat("458.00");
}
if(x === "60" && z === "5") {
document.getElementById("outputCost").innerHTML = ' $500';
document.getElementById("price").value = parseFloat("500.00");
}
if(x === "20" && z === "6") {
document.getElementById("outputCost").innerHTML = ' $280';
document.getElementById("price").value = parseFloat("280.00");
}
if(x === "30" && z === "6") {
document.getElementById("outputCost").innerHTML = ' $378';
document.getElementById("price").value = parseFloat("378.00");
}
if(x === "40" && z === "6") {
document.getElementById("outputCost").innerHTML = ' $436';
document.getElementById("price").value = parseFloat("436.00");
}
if(x === "50" && z === "6") {
document.getElementById("outputCost").innerHTML = ' $558';
document.getElementById("price").value = parseFloat("558.00");
}
if(x === "60" && z === "6") {
document.getElementById("outputCost").innerHTML = ' $530';
document.getElementById("price").value = parseFloat("530.00");
}
if(x === "20" && z === "7") {
document.getElementById("outputCost").innerHTML = ' $300';
document.getElementById("price").value = parseFloat("300.00");
}
if(x === "30" && z === "7") {
document.getElementById("outputCost").innerHTML = ' $401';
document.getElementById("price").value = parseFloat("401.00");
}
if(x === "40" && z === "7") {
document.getElementById("outputCost").innerHTML = ' $462';
document.getElementById("price").value = parseFloat("462.00");
}
if(x === "50" && z === "7") {
document.getElementById("outputCost").innerHTML = ' $436';
document.getElementById("price").value = parseFloat("436.00");
}
if(x === "60" && z === "7") {
document.getElementById("outputCost").innerHTML = ' $560';
document.getElementById("price").value = parseFloat("560.00");
}
if(x === "20" && z === "8") {
document.getElementById("outputCost").innerHTML = ' $320';
document.getElementById("price").value = parseFloat("320.00");
}
if(x === "30" && z === "8") {
document.getElementById("outputCost").innerHTML = ' $424';
document.getElementById("price").value = parseFloat("424.00");
}
if(x === "40" && z === "8") {
document.getElementById("outputCost").innerHTML = ' $488';
document.getElementById("price").value = parseFloat("488.00");
}
if(x === "50" && z === "8") {
document.getElementById("outputCost").innerHTML = ' $536';
document.getElementById("price").value = parseFloat("536.00");
}
if(x === "60" && z === "8") {
document.getElementById("outputCost").innerHTML = ' $590';
document.getElementById("price").value = parseFloat("590.00");
}
if(x === "20" && z === "9") {
document.getElementById("outputCost").innerHTML = ' $340';
document.getElementById("price").value = parseFloat("340.00");
}
if(x === "30" && z === "9") {
document.getElementById("outputCost").innerHTML = ' $447';
document.getElementById("price").value = parseFloat("447.00");
}
if(x === "40" && z === "9") {
document.getElementById("outputCost").innerHTML = ' $514';
document.getElementById("price").value = parseFloat("514.00");
}
if(x === "50" && z === "9") {
document.getElementById("outputCost").innerHTML = ' $636';
document.getElementById("price").value = parseFloat("636.00");
}
if(x === "60" && z === "9") {
document.getElementById("outputCost").innerHTML = ' $620';
document.getElementById("price").value = parseFloat("620.00");
}
if(x === "20" && z === "10") {
document.getElementById("outputCost").innerHTML = ' $360';
document.getElementById("price").value = parseFloat("360.00");
}
if(x === "30" && z === "10") {
document.getElementById("outputCost").innerHTML = ' $470';
document.getElementById("price").value = parseFloat("470.00");
}
if(x === "40" && z === "10") {
document.getElementById("outputCost").innerHTML = ' $540';
document.getElementById("price").value = parseFloat("540.00");'
}
if(x === "50" && z === "10") {
document.getElementById("outputCost").innerHTML = ' $510';
document.getElementById("price").value = parseFloat("510.00");
}
if(x === "60" && z === "10") {
document.getElementById("outputCost").innerHTML = ' $650';
document.getElementById("price").value = parseFloat("650.00");
}
if(x === "20" && z === "11") {
document.getElementById("outputCost").innerHTML = ' $380';
document.getElementById("price").value = parseFloat("380.00");
}
if(x === "30" && z === "11") {
document.getElementById("outputCost").innerHTML = ' $493';
document.getElementById("price").value = parseFloat("493.00");
}
if(x === "40" && z === "11") {
document.getElementById("outputCost").innerHTML = ' $566';
document.getElementById("price").value = parseFloat("566.00");
}
if(x === "50" && z === "11") {
document.getElementById("outputCost").innerHTML = ' $610';
document.getElementById("price").value = parseFloat("610.00");
}
if(x === "60" && z === "11") {
document.getElementById("outputCost").innerHTML = ' $680';
document.getElementById("price").value = parseFloat("680.00");
}
if(x === "20" && z === "12") {
document.getElementById("outputCost").innerHTML = ' $400';
document.getElementById("price").value = parseFloat("400.00");
}
if(x === "30" && z === "12") {
document.getElementById("outputCost").innerHTML = ' $516';
document.getElementById("price").value = parseFloat("516.00");
}
if(x === "40" && z === "12") {
document.getElementById("outputCost").innerHTML = ' $592';
document.getElementById("price").value = parseFloat("592.00");
}
if(x === "50" && z === "12") {
document.getElementById("outputCost").innerHTML = ' $710';
document.getElementById("price").value = parseFloat("710.00");
}
if(x === "60" && z === "12") {
document.getElementById("outputCost").innerHTML = ' $710';
document.getElementById("price").value = parseFloat("710.00");
}
if(x === "20" && z === "13") {
document.getElementById("outputCost").innerHTML = ' $420';
document.getElementById("price").value = parseFloat("420.00");
}
if(x === "30" && z === "13") {
document.getElementById("outputCost").innerHTML = ' $539';
document.getElementById("price").value = parseFloat("539.00");
}
if(x === "40" && z === "13") {
document.getElementById("outputCost").innerHTML = ' $618';
document.getElementById("price").value = parseFloat("618.00");
}
if(x === "50" && z === "13") {
document.getElementById("outputCost").innerHTML = ' $570';
document.getElementById("price").value = parseFloat("570.00");
}
if(x === "60" && z === "13") {
document.getElementById("outputCost").innerHTML = ' $740';
document.getElementById("price").value = parseFloat("740.00");
}
if(x === "20" && z === "14") {
document.getElementById("outputCost").innerHTML = ' $440';
document.getElementById("price").value = parseFloat("440.00");
}
if(x === "30" && z === "14") {
document.getElementById("outputCost").innerHTML = ' $562';
document.getElementById("price").value = parseFloat("562.00");
}
if(x === "40" && z === "14") {
document.getElementById("outputCost").innerHTML = ' $644';
document.getElementById("price").value = parseFloat("644.00");
}
if(x === "50" && z === "14") {
document.getElementById("outputCost").innerHTML = ' $670';
document.getElementById("price").value = parseFloat("670.00");
}
if(x === "60" && z === "14") {
document.getElementById("outputCost").innerHTML = ' $770';
document.getElementById("price").value = parseFloat("770.00");
}
if(x === "20" && z === "15") {
document.getElementById("outputCost").innerHTML = ' $460';
document.getElementById("price").value = parseFloat("460.00");
}
if(x === "30" && z === "15") {
document.getElementById("outputCost").innerHTML = ' $585';
document.getElementById("price").value = parseFloat("585.00");
}
if(x === "40" && z === "15") {
document.getElementById("outputCost").innerHTML = ' $670';
document.getElementById("price").value = parseFloat("670.00");
}
if(x === "50" && z === "15") {
document.getElementById("outputCost").innerHTML = ' $770';
document.getElementById("price").value = parseFloat("770.00");
}
if(x === "60" && z === "15") {
document.getElementById("outputCost").innerHTML = ' $800';
document.getElementById("price").value = parseFloat("800.00");
}
if(x === "20" && z === "16") {
document.getElementById("outputCost").innerHTML = ' $480';
document.getElementById("price").value = parseFloat("480.00");
}
if(x === "30" && z === "16") {
document.getElementById("outputCost").innerHTML = ' $608';
document.getElementById("price").value = parseFloat("608.00");
}
if(x === "40" && z === "16") {
document.getElementById("outputCost").innerHTML = ' $696';
document.getElementById("price").value = parseFloat("696.00");
}
if(x === "50" && z === "16") {
document.getElementById("outputCost").innerHTML = ' $800';
document.getElementById("price").value = parseFloat("800.00");
}
if(x === "60" && z === "16") {
document.getElementById("outputCost").innerHTML = ' $830';
document.getElementById("price").value = parseFloat("830.00");
}
if(x === "20" && z === "17") {
document.getElementById("outputCost").innerHTML = ' $500';
document.getElementById("price").value = parseFloat("500.00");
}
if(x === "30" && z === "17") {
document.getElementById("outputCost").innerHTML = ' $631';
document.getElementById("price").value = parseFloat("631.00");
}
if(x === "40" && z === "17") {
document.getElementById("outputCost").innerHTML = ' $722';
document.getElementById("price").value = parseFloat("722.00");
}
if(x === "50" && z === "17") {
document.getElementById("outputCost").innerHTML = ' $800';
document.getElementById("price").value = parseFloat("800.00");
}
if(x === "60" && z === "17") {
document.getElementById("outputCost").innerHTML = ' $860';
document.getElementById("price").value = parseFloat("860.00");
}
if(x === "20" && z === "18") {
document.getElementById("outputCost").innerHTML = ' $520';
document.getElementById("price").value = parseFloat("520.00");
}
if(x === "30" && z === "18") {
document.getElementById("outputCost").innerHTML = ' $654';
document.getElementById("price").value = parseFloat("654.00");
}
if(x === "40" && z === "18") {
document.getElementById("outputCost").innerHTML = ' $748';
document.getElementById("price").value = parseFloat("748.00");
}
if(x === "50" && z === "18") {
document.getElementById("outputCost").innerHTML = ' $800';
document.getElementById("price").value = parseFloat("800.00");
}
if(x === "60" && z === "18") {
document.getElementById("outputCost").innerHTML = ' $890';
document.getElementById("price").value = parseFloat("890.00");
}
if(x === "20" && z === "19") {
document.getElementById("outputCost").innerHTML = ' $540';
document.getElementById("price").value = parseFloat("540.00");
}
if(x === "30" && z === "19") {
document.getElementById("outputCost").innerHTML = ' $677';
document.getElementById("price").value = parseFloat("677.00");
}
if(x === "40" && z === "19") {
document.getElementById("outputCost").innerHTML = ' $774';
document.getElementById("price").value = parseFloat("774.00");
}
if(x === "50" && z === "19") {
document.getElementById("outputCost").innerHTML = ' $800';
document.getElementById("price").value = parseFloat("800.00");
}
if(x === "60" && z === "19") {
document.getElementById("outputCost").innerHTML = ' $920';
document.getElementById("price").value = parseFloat("920.00");
}
if(x === "20" && z === "20") {
document.getElementById("outputCost").innerHTML = ' $560';
document.getElementById("price").value = parseFloat("560.00");
}
if(x === "30" && z === "20") {
document.getElementById("outputCost").innerHTML = ' $700';
document.getElementById("price").value = parseFloat("800.00");
}
if(x === "40" && z === "20") {
document.getElementById("outputCost").innerHTML = ' $800';
document.getElementById("price").value = parseFloat("800.00");
}
if(x === "50" && z === "20") {
document.getElementById("outputCost").innerHTML = ' $800';
document.getElementById("price").value = parseFloat("800.00");
}
if(x === "60" && z === "20") {
document.getElementById("outputCost").innerHTML = ' $950';
document.getElementById("price").value = parseFloat("950.00");
}
if(d === "yes") {
var p = document.getElementById("price").value;
console.log(p);
var n = parseFloat("50.00");
console.log(n);
t = +p + +n;
console.log(t);
document.getElementById("outputCost").innerHTML = " $" + t;
}
});
function getOption() {
selectElement = document.querySelector('#selectedFont');
output = selectElement.value;
document.querySelector('.output').textContent = output;
getTotal();
};
function getSizeOption() {
selectElement = document.querySelector('#selectedSize');
outputSize = selectElement.value;
document.querySelector('.outputSize').textContent = outputSize;
getTotal();
};
function getMountOption() {
selectElement = document.querySelector('#selectedMount');
outputMount = selectElement.value;
document.querySelector('.outputMount').textContent = outputMount;
getTotal();
};
function getPowerWireOption() {
selectElement = document.querySelector('#selectedPowerWire');
outputPowerWire = selectElement.value;
document.querySelector('.outputPowerWire').textContent = outputPowerWire;
getTotal();
};
function getBackingOption() {
selectElement = document.querySelector('#selectedBacking');
outputBacking = selectElement.value;
document.querySelector('.outputBacking').textContent = outputBacking;
getTotal();
};
function getColorOption() {
selectElement = document.querySelector('#selectedColor');
outputColor = selectElement.value;
document.querySelector('.outputColor').textContent = outputColor;
getTotal();
};
</script>
对不起，它很长，但这里是我正在使用的代码。奇怪的是，当我添加新函数时，它们似乎工作得很好......然后当我去编辑这些函数并为函数添加一些新代码时，我得到了这个错误。
我不太确定代码有什么问题。我确保只加载在 DOM 之后给出错误的函数，但它仍然给我带来问题。
感谢任何帮助。
谢谢！
这是完整的错误：
(index):479 Uncaught ReferenceError: grabText is not defined
at HTMLTextAreaElement.onkeyup ((index):479)
【问题讨论】：
-
不需要在document.ready中定义函数
-
@Nikki9696 是的，虽然我希望通过告诉它等待 DOM 来解决问题......但无济于事。即使我从我的函数中删除它，它仍然不起作用。
-
开发控制台是你最好的朋友——我就是这样找到你的额外单引号的。它不喜欢那些。
-
您可以尝试缩小“某些时间”的范围 - 可能与浏览器缓存有关吗？您如何编辑（内联？文本文档然后保存？），以及何时收到错误（例如当您尝试刷新页面时？在某处部署后？）另外，将脚本放在 HEAD 中而不是 inline 中身体，看看有没有帮助。大多数时候，这些函数会在一个包含在 head 中的 js 文件中。
-
啊，所以你是有限的。如果可以的话，我会说尝试将您的脚本标签放在文档的开头，或者通过不直接使用 onclick 处理程序而是使用 js 本身来附加事件处理程序来破解它。 Workdpress 可能会弄乱 DOM 和脚本的加载方式，因此您不能直接使用 onlick 或 onchange 而是使用该 document.ready 来附加处理程序。
标签： javascript html wordpress function