JavaScriptを使って教科書にフォーカスを設定できません

Question

これは私を苦労させてしまいましたが、問題の原因がわかりません。

私は、さまざまな種類の質問タイプ（多肢選択、回答のタイプなど）を持つクイズを持っており、各質問について、関数を使用してinnerHTMLを設定し、それに応じて値を設定します。

テキストボックスの質問の場合は、自動的にフォーカスを設定したいと思います。私は、javascript、jQuery、およびChrome内のコンソールウィンドウを使用してみました。私はタブのインデックスを-1に設定しました。私はこのウェブサイトを見てきましたが、解決策のどれもうまくいかないようです。

function populate(){ 
 
    render_HTML(session.getCurrentItem().itemType); 
 
    if(session.getCurrentItem().itemType === "multiple choice"){ 
 
     //multiple choice 
 
    } 
 
    else if(session.getCurrentItem().itemType === "typing"){ 
 
     var element = document.getElementById("questionTest"); 
 
     element.innerHTML = session.getCurrentItem().primaryText; 
 
     console.log("set text"); 
 
     $("#inputBox").focus(); 
 
    } 
 
}

.typing .typing-wrapper { 
 
    position: relative; 
 
    margin-top: 10px 
 
} 
 

 
.typing .typing-wrapper .typing-box { 
 
    width: 100%; 
 
    padding: 5.7px 23px; 
 
    height: 57px 
 
} 
 

 
.typing .typing-wrapper .typing-box:focus { 
 
    outline: 0; 
 
}

<div class="central-area" id="central-area"> 
 
    <div class="main typing"> 
 
    <button class="next-button btn btn-inverse clearfix" id="unique-next-button" onclick="switchPage()" style="display: inline-block;" title="Next [Shortcut : Enter]"><span class="next-icon"></span> 
 
    <div class="next-text"> 
 
     Next 
 
    </div></button> 
 
    <div class="question-row row column"> 
 
     <div class="graphic"></div> 
 
     <div class="question-text" id="questionText"> 
 
     to leave 
 
     </div> 
 
    </div> 
 
    <div class="hint row column"> 
 
     <span class="hint-text">Type the correct <strong>French</strong> for the <strong>English</strong> above:</span> 
 
    </div> 
 
    <div class="alert alert-warning typing-alert"></div> 
 
    <div class="typing-wrapper"> 
 
     <span class="marking-icon"></span> 
 
     <input autocomplete="off" class="shiny-box typing-box" id="inputBox" spellcheck="false" tabindex="-1" type="text"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

function populate(){ 
 
    render_HTML(session.getCurrentItem().itemType); 
 
    if(session.getCurrentItem().itemType === "multiple choice"){ 
 
     //multiple choice 
 
    } 
 
    else if(session.getCurrentItem().itemType === "typing"){ 
 
     var element = document.getElementById("questionTest"); 
 
     element.innerHTML = session.getCurrentItem().primaryText; 
 
     console.log("set text"); 
 
     $("#inputBox").focus(); 
 
    } 
 
}

.typing .typing-wrapper { 
 
    position: relative; 
 
    margin-top: 10px 
 
} 
 

 
.typing .typing-wrapper .typing-box { 
 
    width: 100%; 
 
    padding: 5.7px 23px; 
 
    height: 57px 
 
} 
 

 
.typing .typing-wrapper .typing-box:focus { 
 
    outline: 0; 
 
}

<div class="central-area" id="central-area"> 
 
    <div class="main typing"> 
 
    <button class="next-button btn btn-inverse clearfix" id="unique-next-button" onclick="switchPage()" style="display: inline-block;" title="Next [Shortcut : Enter]"><span class="next-icon"></span> 
 
    <div class="next-text"> 
 
     Next 
 
    </div></button> 
 
    <div class="question-row row column"> 
 
     <div class="graphic"></div> 
 
     <div class="question-text" id="questionText"> 
 
     to leave 
 
     </div> 
 
    </div> 
 
    <div class="hint row column"> 
 
     <span class="hint-text">Type the correct <strong>French</strong> for the <strong>English</strong> above:</span> 
 
    </div> 
 
    <div class="alert alert-warning typing-alert"></div> 
 
    <div class="typing-wrapper"> 
 
     <span class="marking-icon"></span> 
 
     <input autocomplete="off" class="shiny-box typing-box" id="inputBox" spellcheck="false" tabindex="-1" type="text"> 
 
    </div> 
 
    </div> 
 
</div>