Javascript How to make 'code' appear in the browser with updates from user-CodePudding

I am trying to create a form. The user will supply some information which will update some of the fields below and produce new code for a different system. However I cannot get the code to display on the HTML page for download... can anyone help?

var categoryName = "This is the catname Variable";
var intro = "<?xml version='1.0' encoding='UTF-8'?> <data> <feature_values> <feature_value feature='natmags:pdb:category' domain='root.' domain2='root.' is_hierarchical='0'"
var output = intro   categoryName;
var documentComplete = intro   categoryName   output;

var elem = document.getElementById("elem");
elem.innerHTML = documentComplete;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home</title>
</head>

<body>

  <form action=file.xml method="get">
    <input type="text" name="serialNumber" />
    <input type="submit" value="Submit">

  </form>

  <h2>My code will be generated below: </h2>
  <h3 id="elem"> </h3>

</body>

</html>

CodePudding user response：

Putting the XML in an HTML element won't make it downloadable.

What you can do is create an anchor with a data: URI containing the XML and the download attribute to download to a file.

To make the XML display in the document, assign it to innerText rather than innerHTML. That way the browser won't try to parse the XML as HTML tags. See how I show the preview in the code below.

var categoryName = "This is the catname Variable";
var intro = "<?xml version='1.0' encoding='UTF-8'?> <data> <feature_values> <feature_value feature='natmags:pdb:category' domain='root.' domain2='root.' is_hierarchical='0'"
var output = intro   categoryName;
var documentComplete = intro   categoryName   output;

var elem = document.getElementById("elem");
elem.innerText = documentComplete;
var anchor = document.getElementById("download");
download.href = "data:text/xml;base64,"   btoa(documentComplete);

<h2>Preview of downloaded text: </h2>
<div id="elem"></div>
<a id="download" download="filename.xml">Click to download</a>

CodePudding user response：

You can use local storage or indexDB to save user data and store it to other pages: localstprage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

indexDB: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API