在wordpress帖子中运行javascript代码

时间:2017-09-01 11:14:53

标签: javascript html wordpress

我想在我的一个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>

我的问题在哪里? 提前谢谢大家!

0 个答案:

没有答案