CODEWITHSUNDEEP
javascriptpyodide
Eblo
Eblo

Reputation: 1

online python compiller on javaScript

i have some html, js code

<!DOCTYPE html>
<html>
<head>
  <title>Pyodide Example</title>
  <script src="https://cdn.jsdelivr.net/pyodide/v0.21.3/full/pyodide.js"></script>
</head>
<body>
  <textarea id="code" rows="10" cols="50">print("Hello, World!")</textarea><br>
  <button id="run">Run Python Code</button>
  <pre id="output"></pre>

  <script src="script.js"></script>
</body>
</html>


async function main() {
  const pyodide = await loadPyodide({ indexURL: "https://cdn.jsdelivr.net/pyodide/v0.21.3/full/" });

  document.getElementById('run').addEventListener('click', async () => {
    const code = document.getElementById('code').value;
    try {
      let output = await pyodide.runPythonAsync(code);
      document.getElementById('output').textContent = output;
    } catch (error) {
      document.getElementById('output').textContent = error;
    }
  });
}

main();

why does it returnig result of python code into browser console?

i tryed to change types of fields on html, used window.alert, but it doesn't helped

Upvotes: 0

Views: 65

Answers (1)

Coco Q.
Coco Q.

Reputation: 814

<!DOCTYPE html>
<html>
<head>
  <title>Pyodide Example</title>
  <script src="https://cdn.jsdelivr.net/pyodide/v0.21.3/full/pyodide.js"></script>
</head>
<body>
  <textarea id="code" rows="10" cols="50">print("Hello, World!")</textarea><br>
  <button id="run">Run Python Code</button>
  <pre id="output"></pre>

  <script>
    async function main() {
      const pyodide = await loadPyodide({ indexURL: "https://cdn.jsdelivr.net/pyodide/v0.21.3/full/" });

      document.getElementById('run').addEventListener('click', async () => {
        const code = document.getElementById('code').value;
        try {
          let output = await pyodide.runPythonAsync(code);
          document.getElementById('output').textContent = output;
        } catch (error) {
          document.getElementById('output').textContent = error;
        }
      });
    }

    main();
  </script>
</body>
</html>

JavaScript code is enclosed within <script> tags directly in the HTML file, which should solve the problem.

Upvotes: 0

Related Questions