JavaScript, HTML, без JQuery - как добавить строку, содержащую ссылку в середине предложения?
Я новичок в JavaScript. Я пытаюсь добавить абзац в HTML (желательно с помощью DOM). Абзац должен содержать строку, предложение со ссылкой посередине. Абзац будет иметь разное содержание в зависимости от выбора пользователя и будет отображаться на веб-странице после нажатия кнопки. Часть моего кода, связанная с вопросом, вставленным ниже. Где ссылка будет «contactThem».
//Returns a correct text to be displayed in a hidden panel.
function displayText(result) {
const fR = parseInt(result);
const contactThem = "<a href='form.html'>form</a>";
let toInclude = "";
if (fR < 5) {
toInclude = "Some text";
} else {
toInclude = "Different text" + contactThem + "more text.";
}
return toInclude;
}
//Displays hidden panel with contents
function showPanel(displayText) {
const toShow = displayText;
const square = document.getElementById("toBeDisplayed");
while (square.hasChildNodes()) {
square.removeChild(square.lastChild);
}
const yourM = document.createElement("h2");
let yourMT = document.createTextNode("Title");
const pp = document.createElement("p");
let ppT = document.createTextNode(toShow);
yourM.appendChild(yourMT);
square.appendChild(yourM);
pp.appendChild(ppT);
square.appendChild(pp);
square.style.visibility = "visible";
}
Я подозреваю, что мой подход может быть неправильным ... Я думал о том, чтобы создать 2 отдельных div и отображать их в зависимости от выбора пользователя, но я бы предпочел сделать это на JavaScript, если это возможно. Я понимаю, что добавлять ссылки в качестве переменных некорректно. Это временный держатель, пока я не найду решение.
извинения, я отредактировал свой пост и добавил вызов displayText.
Звонка displayText по-прежнему нет. Я предполагаю, что вы хотите использовать что-то вроде pp.innerHTML = displayText(5);
извините, я такой идиот и новичок во всем этом :( Надеюсь, моя последняя правка исправила проблему.
Звонка по-прежнему нет. У вас есть function showPanel(displayText), что означает, что теперь вы можете получить доступ к первому параметру, переданному вызову showPanel(...) с помощью displayText. Это фактически помешает вам вызвать имеющуюся у вас функцию displayText, поскольку теперь эта локальная переменная затеняет функцию. И текстовый узел не должен включать HTML. jsfiddle.net/khrismuc/nvpaLy0f
хм, я думаю, что все эти проблемы с вызовом функций возникли из-за того, что это всего лишь 2 функции из многих. У меня есть отдельная функция main (), которая запускает все остальные. Я только вставил 2 функции, с которыми у меня были проблемы. В моем коде я использую следующие параметры: функция displayResult (результат, факторы). В своей основной функции я называю это: var Factors = Factors (choices);
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Всякий раз, когда вы хотите добавить HTML-элемент, такой как <a href = "http://my_url.com">, внутри существующего элемента, вы можете сделать это с помощью HTMLElement.innerHTML = "text that will be rendered" (в отличие от HTMLElement.innerText, который будет отображать все как есть).
В вашем случае это будет примерно так:
const contactThem = "<a href='form.html'>form</a>";
let el = document.createElement("p")
el.innerHTML = "Different text" + contactThem + "other text."
Пьер, спасибо тебе огромное, это идеальное решение для меня и такое простое. * изменить: опечатка
Пожалуйста, создайте минимальный воспроизводимый пример. Вы также никогда не вызываете
displayTextв своем коде. Не могли бы вы прояснить, в чем именно заключается проблема?