我想在我的一个wordpress帖子中使用javascript代码来进行速度和温度的单位转换。但是,无论我使用插件还是将代码直接放在帖子的html查看器中,我都得不到结果。代码是这样的:
function coffFunction(){
var selectbox = document.getElementById("VariableType");
var selected = selectbox.options[selectbox.selectedIndex].value;
var str_input = "intext";
var str_invar = "mySelect";
var str_output = "outtext";
var str_outvar = "outSelect";
if (selected === '1'){
var x = [
[1, 3.28084, 39.3701, 3.6],
[1/3.28084, 1, 12, 1.09728],
[1/39.3701, 1/12, 1, 0.09144],
[1/3.6, 1/1.09728, 1/0.09144, 1]
];
var b = [
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0],
];
var str_v = "vel";
var str_in = str_v.concat(str_input);
var str_inv = str_v.concat(str_invar);
var str_out = str_v.concat(str_output);
var str_outv = str_v.concat(str_outvar);
}else if (selected==='2'){
var x = [
[1, 9/5, 1, 9/5],
[5/9, 1, 5/9, 1],
[1, 9/5, 1, 9/5],
[5/9, 1, 5/9, 1]
];
var b = [
[0, 32, 273.15, 491.67],
[-32*5/9, 0, 255.372, 459.67],
[-273.15, -459.67, 0, 0],
[-491.67, -459.67, 0, 0]
];
var str_v = "temp";
var str_in = str_v.concat(str_input);
var str_inv = str_v.concat(str_invar);
var str_out = str_v.concat(str_output);
var str_outv = str_v.concat(str_outvar);
}
index_i = parseInt(document.getElementById(str_inv).value.replace(/[^0-9\.]/g, ''), 10);
index_j = parseInt(document.getElementById(str_outv).value.replace(/[^0-9\.]/g, ''), 10);
document.getElementById(str_out).innerHTML = document.getElementById(str_in).value * x[index_i][index_j]+b[index_i][index_j];
}
function shFunction(){
window.onload = shFunction;
var selectbox = document.getElementById("VariableType");
var selected = selectbox.options[selectbox.selectedIndex].value;
var vel_box = document.getElementById("velocity");
var temp_box = document.getElementById("temperature");
if (selected === '0'){
vel_box.style.display = 'none';
temp_box.style.display = 'none';
} else if (selected === "1"){
vel_box.style.display = 'block';
temp_box.style.display = 'none';
}else if (selected === "2"){
vel_box.style.display = 'none';
temp_box.style.display = 'block';
}
}
我的css文件是这样的:
div.hidden {
display: none;
}
div.mainbody {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
我在帖子中运行了一个简单的脚本,只需将脚本放在帖子的html视图中即可。但我的JavaScript没有。我使用的简单脚本是:
<script type="text/javascript">
alert ("this is a text box!");
</script>
并且帖子的html视图中的代码是这样的:
<div class="mainbody">
Select your type of variable:<select id="VariableType" onChange="shFunction();" onload="shFunction();">
<option value="0" selected>Choose</option>
<option value="1">Velocity</option>
<option value="2">Temperature</option>
</select><br>
<div id="velocity" class="hidden">
<p>Enter your desired value to be converted below:</p>
<input class="inputnum" type="text" name="input-num" id="velintext" onChange="coffFunction()" oninput="coffFunction()" value =""></input>
Select your input unit:<select id="velmySelect" class="inputvar" onchange="coffFunction()">
<option value="v0">m/s</option>
<option value="v1">ft./s</option>
<option value="v2">in./s</option>
<option value="v3">km/h</option>
</select>
<br>
<p>The converted value to your selected unit is:</p><p id="velouttext" class="outres"></p>
Select your desired unit:<select class="outputvar" id="veloutSelect" onchange="coffFunction()">
<option value="v0">m/s</option>
<option value="v1">ft./s</option>
<option value="v2">in./s</option>
<option value="v3">km/h</option>
</select>
</div>
<div id="temperature" class="hidden">
<p>Enter your desired value to be converted below:</p>
<input class="inputnum" type="text" name="input-num" id="tempintext" onChange="coffFunction()" oninput="coffFunction()" value =""></input>
Select your input unit:<select id="tempmySelect" class="inputvar" onchange="coffFunction()">
<option value="te0">C</option>
<option value="te1">F</option>
<option value="te2">K</option>
<option value="te3">R</option>
</select><br>
<p>The converted value to your selected unit is:</p><p id="tempouttext" class="outres"></p>
Select your desired unit:<select class="outputvar" id="tempoutSelect" onchange="coffFunction()">
<option value="te0">C</option>
<option value="te1">F</option>
<option value="te2">K</option>
<option value="te3">R</option>
</select>
</div>
</div>
我的问题在哪里? 提前谢谢大家!