HTML中的Typed.js代码不起作用

Question

I am trying to use typed text on my home page. I've added the html and js code and scripts but it does not work. It just displays 3 of the quotes when it should be displaying one quote at a time typed out. Below is my code, any help will be appreciated.

Index.cshtml

  <div class="container"> <div class="agile_banner_info"> <div class="agile_banner_info1"> <h3>Welcome To <span>Business</span></h3> <div id="typed-strings" class="agileits_w3layouts_strings"> @*The following text should have the typing effect*@ <p>Global leaders <i>in Business Process</i> and Enterprise Content Management</p> <p>Business <i>efficiency</i> through BPM</p> <p>Increasing <i>productivity.</i> Take informed decisions</p> </div> <span id="typed" style="white-space:pre;"></span> </div> <div class="banner_agile_para"> <p>Our aim is to help our customers succeed</p> </div> <div class="wrapper-inner-tab-backgrounds"> <div class="wrapper-inner-tab-backgrounds-first"><a href="single.html"><div class="sim-button button17">Read More</div></a></div> </div> </div> </div> 

 <script src="~/Content/MyTemplate/js/typed.js" type="text/javascript"></script> <script> $(function () { $("#typed").typed({ stringsElement: $('#typed-strings'), typeSpeed: 30, backDelay: 500, loop: false, contentType: 'html', loopCount: false, callback: function () { foo(); }, resetCallback: function () { newTyped(); } }); $(".reset").click(function () { $("#typed").typed('reset'); }); }); function newTyped() { /* A new typed object */ } function foo() { console.log("Callback"); } </script> 

Answer 1

I added your text in the script and comment out the HTML content. Hope this will help you.

 $(function(){ $("#typed").typed({ strings: ["Global leaders <i>in Business Process</i> and Enterprise Content Management", "Business <i>efficiency</i> through BPM","Increasing <i>productivity.</i> Take informed decisions"], typeSpeed: 110, // typing speed backDelay: 500, // pause before backspacing loop: true, }); }); 

  <div class="container"> <div class="agile_banner_info"> <div class="agile_banner_info1"> <h3>Welcome To <span>Business</span></h3> <!-- <div id="typed-strings" class="agileits_w3layouts_strings"> @*The following text should have the typing effect*@ <p>Global leaders <i>in Business Process</i> and Enterprise Content Management</p> <p>Business <i>efficiency</i> through BPM</p> <p>Increasing <i>productivity.</i> Take informed decisions</p> </div> --> <span id="typed" style="white-space:pre;"></span> </div> <div class="banner_agile_para"> <p>Our aim is to help our customers succeed</p> </div> <div class="wrapper-inner-tab-backgrounds"> <div class="wrapper-inner-tab-backgrounds-first"><a href="single.html"><div class="sim-button button17">Read More</div></a></div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.1/typed.min.js"></script>