работает только одна функция: не может прочитать свойство null

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

В вашем HTML-коде нет элемента с id="selectOne"! Вам необходимо изменить код

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-скрипте

Answer 2

В setOne(), изменить:

document.getElementById("selectOne"); 

как:

document.getElementById("mySelect");