Блог

Что я пытаюсь сделать, так это; — Отключить стрелку вправо до тех пор, пока я не начну печатать — когда я нажимаю, это подсчитывает слова в текстовом поле, и изображение меняется на стрелку влево — когда я нажимаю стрелку влево, которая перезапускает выполнение.

Прямо сейчас он на самом деле не отображает результат, он просто показывает это на секунду и изменяет изображение, но автоматически перезапускает все через секунду, а кнопка со стрелкой вправо включена все время.

 $(document).ready(function() {
  $("input").click(function() {
    var words = $.trim($("textarea").val()).split(" ");
    document.getElementById("resultDiv").innerHTML = words.length;
  });
});  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wordcounter">
  <form action="" method="get" name="frm" onSubmit="TextCount();">
    <!--Text Area-->
    <textarea id="mytext"></textarea><br/>
    <!--Image Flipped Here-->
    <input type="image" id="submit" src="imgs/arrow_button_metal_green_right_T.png" alt="Submit" onclick="document.getElementById('submit').src='imgs/arrow_button_metal_green_left_T.png'">
    <br/>
    <!--Result-->
    <div id="resultDiv">0</div>amp;nbsp;Characters
  </form>
</div>  

Вы настроили свою форму для выполнения GET запроса. Когда вы нажимаете на свой input type="image" элемент, запускается событие отправки формы и выполняет запрос GET на страницу. Поскольку для этих запросов нет кода обработчика, ваша страница, как вы заметили, эффективно проходит «обновление».

Чтобы предотвратить такое поведение, захватите event объект из запущенного click события и используйте его для preventDefault() обратного вызова функции:

 $(document).ready(function() {
  $("input").click(function(e) {
    e.preventDefault();
    var words = $.trim($("textarea").val()).split(" ");
    document.getElementById("resultDiv").innerHTML = words.length;
  });
});  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wordcounter">
  <form action="" method="get" name="frm" onSubmit="TextCount();">
    <!--Text Area-->
    <textarea id="mytext"></textarea><br/>
    <!--Image Flipped Here-->
    <input type="image" id="submit" src="imgs/arrow_button_metal_green_right_T.png" alt="Submit" onclick="document.getElementById('submit').src='imgs/arrow_button_metal_green_left_T.png'">
    <br/>
    <!--Result-->
    <div id="resultDiv">0</div>amp;nbsp;Characters
  </form>
</div>  

Вероятно, лучше использовать фокус вместо щелчка, на случай, если пользователь использует вкладку или что-то еще.

 $(document).ready(function() {
    $('input').blur(function () {
        $('#submit').attr("disabled", "disabled");
    });

    $("input").focus(function () {
        $('#submit').prop('disabled', false);
        var words = $.trim($("textarea").val()).split(" ");
        $("#resultDiv").innerHTML = words.length;
    });

    $("#submit").click(function(){
        var imageSource = $(this).attr('src');
        if(imageSource == "imgs/arrow_button_metal_green_left_T.png"){
            $(this).attr("src","imgs/arrow_button_metal_green_right_T.png");
        }else{
            $(this).attr("src","imgs/arrow_button_metal_green_left_T.png");
        }
    });
});
  

С помощью jQuery вы можете получить resultDiv проще.