Так что я ни в коем случае не разбираюсь в программировании, я просто знаю достаточно Javascript, HTML и CSS, чтобы быть опасным, и я хорошо разбираюсь в гугле (за исключением этого случая). Я модифицировал веб-страницу с кнопками HTML/CSS, которые вызывают функции Javascript для создания текста в текстовом поле, и я прочитал о том, что jQuery может сделать более функциональные диалоговые окна, чем простой JS 'prompt'.

По сути, я пытаюсь сделать следующий html

            

вызов этого скрипта jQuery


Извините, форматирование кода выглядит как мусор... возможно, это моя проблема. Но я не получаю никаких ошибок в Visual Studio Code, но получаю, когда пытаюсь запустить в Edge или Chrome:

Uncaught ReferenceError: p1 is not defined at HTMLInputElement.onclick (acctnotesvr_ALPHAv0.2.2 12312020.html:308) onclick @ acctnotesvr_ALPHAv0.2.2 12312020.html:308

Вместо 308 - первая строка, на которую ссылались выше.

Все, что я хотел бы сделать, это чтобы при нажатии на кнопку HTML в первой строке кода выше появлялось соответствующее диалоговое окно, позволяющее мне выбрать между "замороженным", "медленным" или "сбросом", а затем сгенерировать нужный вывод в текстовом поле.

Я могу поделиться своим исходным HTML и измененным HTML-файлом, с которым у меня возникла эта проблема, но должен предупредить, что мой измененный файл представляет собой огромный беспорядок, поскольку на самом деле я просто подправляю чужую работу (с разрешения, конечно).

Спасибо всем, кто может помочь мне прояснить ситуацию.

Редактирование: В настоящее время у меня есть первая строка кода, приведенная выше, которая вызывает следующую функцию Javascript для создания подсказки. Мне кажется, что диалоговое окно на основе кнопки будет проще для конечного пользователя, чем подсказка в открытом поле.

function p1() {
var newtext = "STB ";
var stbiss = prompt('Is the STB Frozen, Slow, or Resetting?: ', '');
var comma = ", ";
document.form1.textTarget.value += newtext;
document.form1.textTarget.value += stbiss;
document.form1.textTarget.value += comma;
}

РЕДАКТ 2: Итак, я реализовал все исправления и дополнения кода, предоставленные D. Seah (СПАСИБО ВАМ ОГРОМНОЕ!), за исключением следующего:

Потому что "textTarget" для выводимого текстового поля после завершения объявляется так:

Notepad
Copy to Clipboard

Так что, учитывая это и добавление Д. Сеаха

function p1() {
    const update_text = (val) => {
      const input = $("#form1 #textTarget");
      if (input.val()) {
        input.val([input.val(), val].join(", "))
      } else {
        input.val(val)
      }
    }

Я получаю диалоговое окно и кнопки, но нажатие, например, на 'Frozen' не выводит текст в "textTarget", но все мои другие HTML-кнопки, которые вызывают чистые функции Javascript (пример в первом EDIT), работают как задумано. Можно ли как-то изменить 'const input=' или 'class="textTarget"', чтобы сценарий jQuery выводил текст правильно, сохраняя при этом функциональность всех моих кнопок HTML/Javascript?

Adam Crail

Ответов: 2

Ответы (2)

может быть, это поможет вам двигаться дальше

function p1() {
  const update_text = (val) => {
const input = $("#form1 textarea[name='textTarget']");
if (input.val()) {
  input.val([input.val(), val].join(", ")")
} else {
  input.val(val)
}
  }
  $("#dialog").dialog({

autoOpen: true,
кнопки: {
  Frozen: function() {
    update_text("STB FROZEN")
    $(this).dialog("close");
  },
  Slow: function() {
    update_text("STB RUNNING SLOW")
    $(this).dialog("close");
  },
  Сброс: function() {
    update_text("STB RESETTING")
    $(this).dialog("close");
  }
},
width: "400px"
  });
}

  
  
  



  

  
  

Ваша функция p1 определена в закрытии jQuery ready и не будет доступна для цели клика при выполнении функции

Ваш неудачный пример

  • p1 в закрытии, попытка ссылки вне закрытия

$(document).ready(function(){

function p1() {
  console.log("нажатие кнопки обрабатывается p1")
}

});

.

Корректный пример

  • обработчик щелчка установлен внутри закрытия, где также определен p1

$(document).ready(function(){

  $("#mybutton").click(p1); // p1 доступен до функции p1 исходный код, потому что функции 'hoisted'

  function p1() {
    console.log("нажатие кнопки обрабатывается функцией p1")
  }
});

2022 WebDevInsider