На моей странице index.html я прошу пользователя ввести свои данные. Затем создается кнопка с их вводом. Нажатие на кнопку приведет к inside_goal.html. Я хочу, чтобы эта страница имела заголовок, равный имени кнопки.
Это код для запроса ввода данных пользователем:
<body>
<h1 id="home_header" style="font-family: optima; text-align: center"> Nancy Dong </h1>
<div id="enter.goal">
<form id="subBox" onsubmit="createButton(); return false;">
<input type="text" , id="goal">
<input type="submit" , value="Enter Goal">
</form>
</div>
<div id="space_holder" style="top = 50px; left: 50px;">
</div>
<script src='timer.js'>
</script>
<script src='name.js'></script>
</body>
Это код того, как кнопка созданный с вводимым пользователем именем на нем (внутри index.html):
function createButton() {
var x = document.createElement("BUTTON");
x.className = "second";
x.id = "first";
var name = document.querySelector("#goal").value;
var t = document.createTextNode(name);
x.appendChild(t);
document.getElementById("space_holder").appendChild(x);
var insideclass = document.getElementsByClassName("second");
insideclass[counter].innerHTML = `<input type="button" onclick="location.href='inside_goal.html';" value="${name}" />`;
counter = counter + 1;
document.querySelector("#goal").value = "";
Теперь проблема в том, что я не могу найти способ поместить #goal в inside_goal.html. Я пробовал:
document.getElementById("h1").innerHTML = $('#goal').load("index.html");
, но он печатает только [object Object]
Я также пробовал:
$.get( "index.html", function(test) {
$( "#h1" ).html( test );
alert( "Load was performed." );
});
Как я могу получить доступ только к #goal часть index.html и не отображать всю страницу HTML на inside_goal.html?