3

So I'm very new to HTML and I was trying to take an txt output file, convert it into usable data, and input that data into HTML, changing various attribute values, like title and innerHTML

As an example, I was trying to use document.GetElementById("vars").search to reference the sequence of dna stored in search and set it to some button's title, but it wound up being undefined.

I'm really just confused on how to use variables, and if you have any idea as to what format I should make the file of data input for the HTML please share!

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

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

</script>
Lauren Kenyon
  • 23
  • 4
  • JSON is a pretty common format for this these days, but it depends if you are using a server or just trying to load this data from a local file. – JasonB Feb 19 '19 at 02:07
  • local file is fine! Any suggestions on how to access variables? – Lauren Kenyon Feb 19 '19 at 02:10
  • What happens if you put `console.log( search);` in a script tag in your html file after linking to the script you showed above? You don't need any id on the script tag. – JasonB Feb 19 '19 at 02:13

2 Answers2

2

As 'search' variable is a long string, you'd better use 'p' tag instead of 'button' tag. try this:

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

`

thinke
  • 211
  • 3
  • 5
0

Here's a rough example based on the

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

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

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

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

data in your question.

JasonB
  • 6,243
  • 2
  • 17
  • 27
  • Must I put this script below my button? How does order of script and changing titles and other attributes affect the output? – Lauren Kenyon Feb 19 '19 at 02:26
  • The script can be anywhere on the page, but it is a best practice to put the scripts near the end of the page so they don't prevent the page from loading quickly. I updated this answer to wrap the button changing function in an eventHandler so that it shouldn't matter which order the scripts are added and just fire when the page has loaded all of the assets. – JasonB Feb 19 '19 at 02:37