Question

我有一个可以说脚本的文本，它是由像这样的HTML上的Javascript调用的;

<head>
<script src="speakClient.js"></script>
</head>
<body>
<button onclick="speak('type text to speak here')">Talk</button>
<div class="article">
<p>Sample text is here!!</p>
</div>
<div id="audio"></div>
</body>

目前，当按下“对话”按钮时，预定义文本（在这种情况下，“在此说出类型文本”）将由TTS发言。

如何在按下按钮时更改它，它会说出div.article中的任何文本而不是预定义的文本？

编辑：链接到JS https://github.com/kripken/speak.js/blob/master/speakClient.js

提前致谢

Answer 1

<div class="article">
<script>var text = "Sample text is here!!";</script>
</div>

<button onclick="speak(text)">Talk</button>

Answer 2

为<p>标记添加ID，然后您可以通过调用innerHtml来提取该值。

示例：

<button onclick="speak(document.getElementById('textToUse').innerHTML)">Talk</button>
<div class="article">
<p id="textToUse">Sample text is here!!</p>
</div>

Answer 3

您可以使用jQuery轻松获取元素的文字内容：

var textToSpeak = $('div.article').text();

然后动态设置onclick函数：

<button onclick="speak($('div.article').text())">Talk</button>

这比使用纯JavaScript和innerHTML属性更好，因为此解决方案将剥离潜在的HTML标记。

Answer 4

尝试将以下脚本添加到要阅读文本的元素中。

onclick="speak(this.innerText);"

Onclick HTML Div

4 个答案: