如何将textarea的内容获取到单独的JavaScript文件?

问题描述 投票:0回答:1

是否可以以某种方式将 textarea 元素的内容获取到单独的 JavaScript 文件,而不将 JavaScript 文件插入到 HTML 代码中?我无法将 JavaScript 文件插入 HTML 文件,因为 MathSteps 无法在浏览器中运行。

这是 JavaSript 文件:

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);
});

这是 HTML 文件:

<!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>

这也是 Python 文件: '''

# 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')

'''

我对 JS、CSS 和 HTML 都很陌生,所以请耐心等待。谢谢!

javascript html textarea
1个回答
0
投票

这里需要重点关注的是:

  • 您有一个 HTTP 服务器(用 Python 编写),Web 浏览器可以从中请求 HTML 文档。
  • 我认为,您希望浏览器用户在该文本区域中输入一些数据并将其发送到服务器进行处理
  • 你想用 JavaScript 库来处理它

从浏览器获取数据到服务器

介绍性表单教程开始,其中涵盖发送表单数据

处理提交的数据

将其传递给Node程序

你的Python程序似乎没有任何理由使用Python。您的项目似乎围绕 Node.js 库展开。考虑使用 Node.js 和 express 库 重写您的 HTTP 服务器。这比运行外部进程并将数据传递给它要简单。

如果你坚持使用Python:

© www.soinside.com 2019 - 2024. All rights reserved.