automatic select input html

Question

I have simple form and I want to add auto select to input ,

here is my solution.

Form HTML

 <div class="video large-8 columns large-push-4">
                        <iframe width="100%"  id="videoframe" src="videoframe.html" autoplay>   
                      </iframe>
                </div>

        <div class="form">
                                <span class="form-title">Wypełnij formularz, nasz doradca oddzwoni do Ciebie!</span>
                                <div class="centered">
                                    <input name="client_name" id="client_name" type="text"  placeholder="Imię" class="clientName medium small-12 select_input" />
        </div>
    </div>

Here is videoframe.js.

      $(document).ready(function(){
       document.getElementById('playervideo').addEventListener('timeupdate', function (e) {
        if(stateplayer=="przywitanie" && !$("#playervideo").hasClass("autoselectname") ) {
            if(document.getElementById('playervideo').currentTime >  5) {
                console.log("Zaselektuj pole imie");
                $("#playervideo").addClass("autoselectname");
           //  var inputSelect =document.getElementById('client_name');
                var inputSelect = document.getElementById('client_name');
                inputSelect.focus()
            }
        }
        //console.log("timeupdate: " + document.getElementById('playervideo').currentTime);

    })

   });

Here is player videoframe.html video tag

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Wideo iframe</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="css/style.css">

</head>

<body>
    <div id="videowrapper">
        <video  id="playervideo" playsinline controls muted>
        </video>
        <!-- <canvas id="videocanvas" width="1024" height="576"></canvas> -->
        <div class="fader"></div>
        <span id="customPlayer">
                <img src="./img/replay.png">
            </span>
            <span id="customPlayerMute">
                <img src="./img/wyciszony.png">
            </span>
            <span id="customPlayerVoice" class="customPlayerVoice not_clicked"  style="display: none">
                    <img src="./img/glosny.png">
            </span>
    </div>
</body>
<script src="jslibs/howler.min.js"></script>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="js/videoframe.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mobile-detect/1.4.3/mobile-detect.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mobile-detect@1.4.3/mobile-detect.min.js"></script>

</html>

But unfortunatelly I am getting the following error

jquery-3.3.1.js:3827 Uncaught TypeError: Cannot read property 'select' of null
    at HTMLDocument.<anonymous> (videoframe.js:256)
    at mightThrow (jquery-3.3.1.js:3534)
    at process (jquery-3.3.1.js:3602)

console.log(inputSelect) returns this null

What am I doing wrong with my code?

Answer 1

Don't have enough reputation to comment yet. You can try adding defer tag to your script. <script src="js/videoframe.js" type="text/javascript" defer></script>

Answer 2

If you see the call stack which you have pasted, the error is not about the inputSelect element. You have error here: videoframe.js:256 .

My guess is, your code is not reaching to the point where you are trying to access the inputSelect element. Try putting a debugger and fixing the code at line 256 of videoframe.js .

There is no .select in the snippet you have provided, so I think, when you are trying to do something.select() , that something is turning out to be null .

automatic select input html

Question

2 answers

solution1
0 2019-02-05 11:13:09

solution2
0 2019-02-05 11:24:22

automatic select input html

Question

2 answers

solution1 0 2019-02-05 11:13:09

solution2 0 2019-02-05 11:24:22

solution1
0 2019-02-05 11:13:09

solution2
0 2019-02-05 11:24:22