Блог

Я новичок в stack Overflow, но я действительно хороший разработчик. У меня есть вопрос о том, как выполнить функцию, когда пользователь изменяет строку в строке поиска html. Вот мой код:

HTML:

 <div class="search search--open">

       <form class="search__form" action=""><input class="search__input"id="search__input" name="search" type="text" placeholder="Command Line"autocomplete="off"autocorrect="off"autocapitalize="off"spellcheck="false"></form>

            <div class="terminal">
                <p class="terminal__line">Welcome:<span class="green"><</span><span class="green" id="ip"></span><span class="green">></span></p>
                <p class="terminal__line">How's the weather in: <span class="country green"></span>?</p>
                <p class="terminal__line">Panel interface completed.</p>
                <p class="terminal__line">Navigation portals fetched:</p>
                <p class="terminal__line"><a href="#">#home</a></p>
                <p class="terminal__line"><a href="#">#blog</a></p>
                <p class="terminal__line"><a href="#">#codelab</a></p>
                <p class="terminal__line"><a href="#">#contact</a></p>
                <p class="terminal__line"><a href="#">#gethacked</a></p>
                <p class="terminal__line"><a href="#">#aboutme</a></p>
                <p class="terminal__line"><a class="out" href="#">#_instagram</a></p>
                <p class="terminal__line">Inject <a href="#">Help.md</a> to C:Users<span class="console"></span></p>
                <p class="terminal__line">\<span class="console"></span><a href="#">C:UsersPublicHelp.md</a> > In order to navigate click on the links above or type the section you would like to access e.g: "home"</p>
        <p class="terminal__output"></p>
            </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/easing/EasePack.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenLite.min.js"></script>

        </div>
  

JavaScript:

 //FIND IP

        function findIP(onNewIP) { //  onNewIp - your listener function for new IPs
          var myPeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection; //compatibility for firefox and chrome
          var pc = new myPeerConnection({iceServers: []}),
            noop = function() {},
            localIPs = {},
            ipRegex = /([0-9]{1,3}(.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/g,
            key;

          function ipIterate(ip) {
            if (!localIPs[ip]) onNewIP(ip);
            localIPs[ip] = true;
          }
          pc.createDataChannel(""); //create a bogus data channel
          pc.createOffer(function(sdp) {
            sdp.sdp.split('n').forEach(function(line) {
              if (line.indexOf('candidate') < 0) return;
              line.match(ipRegex).forEach(ipIterate);
            });
            pc.setLocalDescription(sdp, noop, noop);
          }, noop); // create offer and set local description
          pc.onicecandidate = function(ice) { //listen for candidate events
            if (!ice || !ice.candidate || !ice.candidate.candidate || !ice.candidate.candidate.match(ipRegex)) return;
            ice.candidate.candidate.match(ipRegex).forEach(ipIterate);
          };
        }

function addIP(ip) {
  console.log('got ip: ', ip);

    var theIp = document.getElementById('ip');
    var theConsole = $('span.console');
    var texted = ip;

  theIp.textContent = ip;



    theConsole.html(texted);

}

findIP(addIP);

//FIND LOCATIOn


$.getJSON('https://ipapi.co/' $(ip).val() '/json', function(data){

      $('.country').text(data.country);
  });


    (function() {

        var theConsole = $('span.console');
        var texted = $("#ip").text();

        theConsole.html(texted);
    });

var search_form = document.getElementsByClassName('search__form');
console.log(search_form);



function createHome(){

  var homeDiv = document.createElement('div');
        homeDiv.innerHTML = '<div class="home_container"><h2>I am hungry</h2><p>Shall we go eat?</p><div class="close_home" href="">x</div></div>';
        homeDiv.setAttribute('class', 'home');
        document.body.appendChild(homeDiv);

        $('.close_home').click(function(){
            $('.home').remove();
            console.log('Home Erased');
        });


}


var navigationLink = $('.terminal__line a');

navigationLink.click(function(e){
  if ($(this).hasClass('out')) {
    window.open('http://instagram.com/arcticben.co.uk');
  }else
  {
  createHome();
  }
});




    $(search_form).submit(function( event ) {
      if ( 'aboutme' === $( "input" ).val() || 'codelab' === $( "input" ).val() ||  'contact' === $( "input" ).val() || 'gethacked' === $( "input" ).val() || 'blog' === $( "input" ).val() || 'home'  === $( "input" ).val()) {

    createHome();

      } else if ( $( "input" ).val() === "instagram" ) {
                window.open('http://instagram.com/arcticben.co.uk');
        } else if ($( "input" ).val() === "ipconfig") {

        var binder = $('input').val();
        var terminal_div = document.getElementsByClassName('terminal');
            $('.terminal').addClass("binding");
        var theipagain = $('#ip').html();

        var ipconfig = document.createElement('p');
              $(ipconfig).text('ipconfig: '   theipagain);
              ipconfig.setAttribute('class', 'terminal__line');
              $(ipconfig).appendTo(terminal_div);
              console.log(ipconfig.length);

      }

        var binder = $('input').val();
        var terminal_div = document.getElementsByClassName('terminal');
                $('.terminal').addClass("binding");

        var commands = document.createElement('p');
                    commands.innerHTML = ('Execute: '   binder);
                    commands.setAttribute('class', 'terminal__line');
                    $(commands).appendTo(terminal_div);





      event.preventDefault();
});



})(window);
  

Я хочу использовать строку поиска html для обновления выходных данных терминала:

 <p class="terminal__output"></p>
  

используя форму поиска в html.

Цель состоит в том, чтобы заставить JavaScript изменять вывод терминала на основе того, какая команда введена. Кто-нибудь, пожалуйста, может помочь!