Html - How to get the contents of textarea to a separate JavaScript-file?

mm
October 1, 2023
345 views
0 votes
2 Answers

Is it possible to somehow get the contents of a textarea element to a separate JavaScript file without inseting the JavaScript file into the HTML code? I cannot insert the JavaScript file into the HTML file, because MathSteps won’t work in a browser.

Here’s the JavaSript file:

question = getTextareaContentsById("question")

const mathsteps = require('mathsteps');
const steps = mathsteps.solveEquation(question);

steps.forEach(step => {
    console.log("before change:");
    console.log(step.oldEquation.ascii());
    console.log("change:");
    console.log(step.changeType);
    console.log("after change:");
    console.log(step.newEquation.ascii());
    console.log("# of substeps:");
    console.log(step.substeps.length);
});

And here’s the HTML file:

<!DOCTYPE html>
<html>
<head>
    <title>Step By Step Calculator</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
    <style>
        body {
            font-family: Roboto, sans-serif;
            margin: 10px;
            padding: 0;
            background-color: white;
            text-align: center;
        }
        .container {
            display: block;
        }
        #question {
            margin: 0 auto;
        }
        #submit-button {
            width: 10vw;
            margin: 0 auto;
            align-items: center;
            text-align: center;
            display: block;
        }
        #steps {
            text-align: center;
            margin-left: 50%;
            transform: translateX(-50%);
            background-color: aquamarine;
            width: 200px;
        }
        #steps:nth-child(even) {
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
<div class="container">
    <h2 id='header'>Enter a math problem:</h2>
    <textarea id="question" cols="90" rows="1"></textarea>
    <p>Steps:</p>
    <div id="steps-container">
        {% for line in stdout_lines %}
        <p class="steps">{{ line | safe }}</p>
        {% endfor %}
    </div>
</div>
</script>
</body>
</html>

And here’s the Python file, too:
”’

# main.py
from flask import Flask, render_template
import subprocess

app = Flask(__name__)

@app.route("/")
def home():
    result = subprocess.run(["/usr/bin/node", "mathsteps.js"], capture_output=True, text=True)
    stdout = result.stdout
    # Erota tulosteet rivinvaihdolla
    stdout_lines = stdout.split("n")

    return render_template("home.html", stdout_lines=stdout_lines)

if __name__ == "__main__":
    app.run(debug=True, host='0.0.0.0', port='3002')

”’

I’m very new to JS, CSS and HTML, so bear with me. Thanks!

Answers

- Quentin
- September 28, 2023 at 3:50 pm
- 0 votes
0
The key points that you need to focus on here are that:
- You have an HTTP server (written in Python) which a web browser can request an HTML document from.
- You want, I assume, the user of the browser to type some data into that textarea and send it to the server for processing
- You want to process it with a JavaScript library
Getting the data from the browser to the server

Start with an introductory forms tutorial which covers sending form data.
- Put the textarea in a form (with an action pointing to a URL on your server)
- Give the textarea a name
- Add a submit button
Process the submitted data
- Create a route for the URL
- Read the form data
Pass it to the Node program

Your Python program doesn’t seem to have any reason to be in Python. Your project appears to revolve around a Node.js library. Consider rewriting your HTTP server using Node.js with the express library. This will be less fuss than shelling out to run an external process and passing the data to it.

If you are sticking to Python:
- Write the collected data to stdin in your subprocess call
- Change the Node.js program to read from STDIN.
Login or Signup to reply.

- AfzalK
- October 1, 2023 at 11:03 am
- 0 votes
0
```
function savingcontents() {
    
    let question = document.querySelector('#question');
    let contents = question.value;

    let file = new Blob([contents]);
    let link = document.createElement('a');
    link.download = "contents_file.js";
    link.href = URL.createObjectURL(file);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}
savingcontents();
```
get content of a textarea, create a new file with content of the textarea then create a download link, trigger the download link, then removes link from the DOM.

call this function to save the content of textarea to a separate js file.

Hope this helps!
Login or Signup to reply.