英文:
How can I show multiple id as latex equation by using mathquill?
问题
我正在尝试创建一个符号调色板，其中将有一个输入字段，我将单击包含Latex符号的按钮，该符号将成为字段中的输入。由于会有多个符号，我尝试使用多个按钮和MQ.StaticMath来显示Latex方程。但是只有第一个id接受我的Latex输出。不幸的是，其他id没有接受。我尝试过使用类而不是id，并在脚本中使用getElementByClassName，但也没有起作用。在这里，我分享了我的代码和截图。希望有人可以帮助我解决这个问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Run Mathquill</title>
<!-- YOU NEED mathquill.css , jquery and mathquill.js SEARCH AND PICK IT SOMEWHERE, SEARCH ON THE WEB IF THIS DOWN NOT RUN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.css"
integrity="sha512-vPg9GqsZZ4LHv9BkFfZSXt7y4D7YaARPU2JFmpZug4EgtJJrumytMAFZkNSk2LSyqWir0TNbh2tBq7UJIMxvlA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.js"
integrity="sha512-7jEhcM7FbjGHo1ejs1iw1J8FxcnACx7Z3lG29gQ5vTBe2U/gaQpzwjzPCyg32zTwXCloQDdorpLufmu0nBIqnQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- INFORM THE LATEST AVERSION INTERFACE WITH THIS CODE -->
<script>
var MQ = MathQuill.getInterface(2);
</script>
</head>
<body>
<br>
<button class="symbol">\sqrt{}</button>
<button class="symbol">\frac{1}{2}</button>
<script>
var symbols = document.getElementsByClassName('symbol');
for (var i = 0; i < symbols.length; i++) {
MQ.StaticMath(symbols[i]);
}
</script>
</body>
</html>
输出：如果我注释掉一行，另一个工作得很好，但我需要同时或更多工作。
如图所示，只有一个正在工作。
英文:
I am trying to make a symbol palette where there will be an input field and I will click on a button that contains a latex symbol that will be the input in the field. As there will be multiple symbols, I am trying to use multiple buttons and MQ.StaticMath to show the latex equation. But the first id is accepting my latex output. Unfortunately, not the rest ids. I tried with class instead of id and using getElementByClassName in the script but not working as well. Here I am sharing my code and screenshots.
Hoping someone can help me out with it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Run Mathquill</title>
<!-- YOU NEED mathquill.css , jquery and mathquill.js SEARCH AND PICK IT SOMEWHERE, SEARCH ON THE WEB IF THIS DOWN NOT RUN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.css"
integrity="sha512-vPg9GqsZZ4LHv9BkFfZSXt7y4D7YaARPU2JFmpZug4EgtJJrumytMAFZkNSk2LSyqWir0TNbh2tBq7UJIMxvlA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.js"
integrity="sha512-7jEhcM7FbjGHo1ejs1iw1J8FxcnACx7Z3lG29gQ5vTBe2U/gaQpzwjzPCyg32zTwXCloQDdorpLufmu0nBIqnQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- INFORM THE LATEST AVERSION INTERFACE WITH THIS CODE -->
<script>
var MQ = MathQuill.getInterface(2);
</script>
</head>
<body>
<br>
<button id="symbol">\sqrt{}</button>
<button id="symbol">\frac{1}{2}</button>
<script>
var symbols = document.getElementById('symbol');
MQ.StaticMath(symbols);
</script>
</body>
</html>
And the output if I comment on one line another works perfectly but I need both or more to work.
As it's visible only one is working.
答案1
得分: 0
你有多个按钮元素需要处理，因此需要使用 JavaScript 的 forEach 方法。
<script>
var MQ = MathQuill.getInterface(2);
var symbols = document.querySelectorAll('#symbol');
symbols.forEach(MQ.StaticMath);
</script>
<details>
<summary>英文:</summary>
You have multiple button elements to handle. So you need to use js forEach.
~~~
<script>
var MQ = MathQuill.getInterface(2);
var symbols = document.querySelectorAll('#symbol');
symbols.forEach(MQ.StaticMath);
</script>
~~~
<hr>
[![Mathquill in buttons][1]][1]
<hr>
[1]: https://i.stack.imgur.com/2e0k2.png
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论