Как получить элементы из файла javascript и поместить их в элементы HTML

Итак, я очень новичок в HTML, и я пытался взять выходной файл txt, преобразовать его в полезные данные и ввести эти данные в HTML, изменив различные значения атрибутов, такие как title и innerHTML.

Например, я пытался использовать document.GetElementById("vars").search, чтобы сослаться на последовательность ДНК, хранящуюся в поиске, и установить для нее заголовок какой-либо кнопки, но он оказался неопределенным.

Я действительно просто запутался в том, как использовать переменные, и если у вас есть какие-либо идеи относительно того, в каком формате я должен сделать файл ввода данных для HTML, пожалуйста, поделитесь!

<script id = "vars" type = "text/javascript">

      var seqId = "Chr23";
      var search = "CCATGCGAATGCTGATATCGTAGCAAAAACACAGGGACGGTGCGAAAGAAGAGGGATTTTATTTTGTTTTCGCCTGGCAATTGAGTAATGGCCGGACTCCTTCACCTGACCAAGCAGTGCAGCATCCACCTACCCGCCCACTTGGGACGCGCGAAATGCTACACACTCGCTAAGGGACCGGGAACACACGTGCAGGCAAGAGTG";

</script>

input html genome
person Lauren Kenyon    schedule 19.02.2019    source источник
comment
В наши дни JSON является довольно распространенным форматом для этого, но это зависит от того, используете ли вы сервер или просто пытаетесь загрузить эти данные из локального файла.   -  person JasonB    schedule 19.02.2019
comment
локальный файл в порядке! Любые предложения о том, как получить доступ к переменным?   -  person Lauren Kenyon    schedule 19.02.2019
comment
Что произойдет, если вы поместите console.log( search); в тег script в своем html-файле после ссылки на скрипт, который вы показали выше? Вам не нужен идентификатор в теге script.   -  person JasonB    schedule 19.02.2019

Ответы (2)


arrow_upward
2
arrow_downward

Поскольку переменная «поиск» представляет собой длинную строку, лучше использовать тег «p» вместо тега «кнопка». попробуй это:

var seqId = "Chr23";
var search = "CCATGCGAATGCTGATATCGTAGCAAAAACACAGGGACGGTGCGAAAGAAGAGGGATTTTATTTTGTTTTCGCCTGGCAATTGAGTAATGGCCGGACTCCTTCACCTGACCAAGCAGTGCAGCATCCACCTACCCGCCCACTTGGGACGCGCGAAATGCTACACACTCGCTAAGGGACCGGGAACACACGTGCAGGCAAGAGTG";	
document.getElementById("p1").innerHTML=search;
<p id="p1">SearchContent</p>

`

person thinke    schedule 19.02.2019

arrow_upward
0
arrow_downward

Вот грубый пример, основанный на

const seqId = "Chr23";
const search = "CCATGCGAATGCTGATATCGTAGCAAAAACACAGGGACGGTGCGAAAGAAGAGGGATTTTATTTTGTTTTCGCCTGGCAATTGAGTAATGGCCGGACTCCTTCACCTGACCAAGCAGTGCAGCATCCACCTACCCGCCCACTTGGGACGCGCGAAATGCTACACACTCGCTAAGGGACCGGGAACACACGTGCAGGCAAGAGTG";

document.onreadystatechange = function() {
  if (document.readyState == "interactive") {

    document.getElementById('myButton').innerHTML = search;

  }
}
<button id="myButton">MyButtonTitle</button>

данные в вашем вопросе.

person JasonB    schedule 19.02.2019
comment
Должен ли я разместить этот скрипт под моей кнопкой? Как порядок сценария и изменение заголовков и других атрибутов влияет на результат? - person Lauren Kenyon; 19.02.2019
comment
Сценарий может находиться где угодно на странице, но рекомендуется размещать сценарии ближе к концу страницы, чтобы они не препятствовали быстрой загрузке страницы. Я обновил этот ответ, чтобы обернуть функцию изменения кнопки в обработчике событий, чтобы не имело значения, в каком порядке добавляются сценарии, и просто срабатывал, когда страница загрузила все ресурсы. - person JasonB; 19.02.2019