Question

我有两个功能应该在选择其中一个选项后运行。函数setOne()不起作用，但是函数myFunction()起作用。我看着控制台，它说：

 index.html:103 Uncaught TypeError: Cannot read property **options** of null
    at setOne
    at HTMLSelectElement.onchange

有人可以帮我说功能setOne()也在起作用吗？

感谢您的工作！

这是我的代码：

    <form name="formcalc">
            <div class="form-group row">
                <label for="staticEmail" class="col-sm-2 col-form-label">Please select</label>
                <select class="col-sm-10 form-control" id="mySelect" onchange="myFunction();setOne();">
                    <option value="0">CHF 0</option>
                    <option value="75000">CHF 75'000</option>
                    <option value="100000">CHF 100'000</option>
                </select>
                <!-- <div class="col-sm-10">                   
                    <input type="tel" class="form-control" name="txtnum1">
                </div> -->
            </div>
            <fieldset disabled>
                <div class="form-group row">
                    <label for="staticEmail" class="col-sm-2 col-form-label">Output 1</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="n1" name="txtres" value="CHF " readonly>
                    </div>
                </div>
                <div class="form-group row">
                    <label for="staticEmail" class="col-sm-2 col-form-label">Output 2</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="n2" name="txtres2" value="CHF " readonly>
                    </div>
                </div>
            </fieldset>
        </form>

这是我的js代码：

    <!--JavaScript-->
    <script type="text/javascript" id="javatest">
        function setOne() {
            const selectOne = document.getElementById("selectOne");
            if (selectOne.options[selectOne.selectedIndex].text == "CHF 75'000")
                document.getElementById("n1").value = "CHF 64.80";
            else if (selectOne.options[selectOne.selectedIndex].text == "CHF 100'000")
                document.getElementById("n1").value = "CHF 104.80";
        }    

        function myFunction() {
            var num3 = 1000000;
            var num5 = $('[name=txtres]').css("color", "green").css("font-weight", "bold").val();
            var num6 = $('[name=txtres2]').css("color", "red").css("font-weight", "bold").val();
            document.formcalc.txtres2.value = new Intl.NumberFormat('de-CH', { style: 'currency', currency: 'CHF' }).format(num3);

            var x = document.getElementById("mySelect").value;
            document.getElementById("demo").innerHTML = '<div class="output">This is a text';
        }    
    </script>

Answer 1

在setOne()中，更改：

document.getElementById("selectOne");

为：

document.getElementById("mySelect");

Answer 2

使用id="selectOne"!的HTML代码中没有元素，您需要更改代码

document.getElementById("selectOne")

到

document.getElementById("mySelect")

或者您可以使用来更改HTML代码

<select class="col-sm-10 form-control" id="mySelect" .......

到

<select class="col-sm-10 form-control" id="selectOne" ...................

在HTML和Java脚本中只需使用相同的ID

只有一个函数有效：无法读取null属性

2 个答案: