Question 256135 in Html Question posted in
Some basic documentation can be found here.

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

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!

Tags:

2

Answers


  1. 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.

    Process the submitted 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:

    Login or Signup to reply.
  2. 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.
Please signup or login to give your own answer.

Back To Top
Search