时间戳

首页 > 解决方案 > 按下按钮后获取段落文本并将其传递给 javascript 函数

javascript - 按下按钮后获取段落文本并将其传递给 javascript 函数

问题描述

我试图说出按下按钮后填充 HTML 段落的文本。我用于语音的库是speak.js，到目前为止，我将我的网页口语工作放在一起的简单演示。但是，现在我在按下按钮后从 Internet 上提取文本，我希望能说出这些文本。我无法弄清楚如何将文本提取到具有该speak()功能的 HTML 标记中。

<div class="container well" id="#wiki-body-container">
  <p id="wiki-body" onchange="speak('!!! TEXT GOES HERE !!!')"></p>
  <div id="audio"></div>
</div>

那就是我拥有的 HTML。按下按钮后，带有 id 的段落wiki-body被填充。这个文本我想用来填充speak()函数参数。

我该怎么做呢？

编辑（添加更多代码）：

这是我用来填充段落的相应 javascript。

$(document).ready(function(){

  $('#wiki-body-container').hide();

  $('#search-button').click(function() {

    console.log($("#search").val().replace(" ", "_"));
    var searchTerm = $("#search").val().replace(" ", "_");
    $.ajax({
        type: "GET",
        url: 'http://en.wikipedia.org/w/api.php?action=parse&format=json&prop=text&section=0&page=' + searchTerm + '&callback=?',
        contentType: "application/json; charset=utf-8",
        async: false,
        dataType: "jsonp",
        success: function (data, textStatus, jqXHR) {
            console.log(data);
            var markup = data.parse.text["*"];
            var section = $('<p></p>').html(markup);

            // remove links as they will not work
            section.find('a').each(function() { $(this).replaceWith($(this).html()); });
            // remove any references
            section.find('sup').remove();
            // remove cite error
            section.find('.mw-ext-cite-error').remove();
            // fill in html section with text
            $('#wiki-body-container').show();
            $('#wiki-body').html($(section).find('p'));
            speak(section); // Not able to call
        },
        error: function (errorMessage) {
          console.log(errorMessage)
        }
    });
  });
});

这是完整的 HTML 正文。

<body>

<div class="jumbotron text-center">
  <a title="By English: Redrawn in SVG by Otourly (concept by Paullusmagnus)
Deutsch: Nachgezeichnet als Vektorgrafik von Otourly (Konezpt von Paullusmagnus). (Original image Image:Wikipedia-logo.png) [CC BY-SA 3.0 (https://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons" href="https://commons.wikimedia.org/wiki/File:Wikipedia_svg_logo.svg"><img width="128" alt="Wikipedia svg logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Wikipedia_svg_logo.svg/1000px-Wikipedia_svg_logo.svg.png"></a>
  <p>Search Wikipedia by voice!</p>
  <form class="form-inline">
    <div class="input-group">
      <input type="search" id="search" class="form-control" size="50" placeholder="Verbalize a query" required>
      <div class="input-group-btn">
        <button type="button" class="btn btn-danger" id="search-button"><span class="glyphicon glyphicon-search"></span></button>
      </div>
    </div>
  </form>
</div>

<div class="container well" id="#wiki-body-container">
  <p id="wiki-body"></p>
  <div id="audio"></div>
</div>

</body>

标签： javascripthtml

解决方案

如果您不想使用计时器并检查<p>元素的内容，可以尝试DOMSubtreeModified事件：

function changeText() {
  document.getElementById( 'wiki-body' ).innerText = document.getElementById( 'text' ).value
}

document.getElementById( 'wiki-body' ).addEventListener( 'DOMSubtreeModified', function() {
  speak( this.innerText )
} )
p {
  width: 300px;
  height: 50px;
  background-color: #efefef;
  border: 1px solid #ddd
}
<script src="http://yourjavascript.com/21843061212/speakclient.js"></script>

<input type="text" id="text" value="Stack Overflow" />
<button type="button" onclick="changeText()">Add and Speak this text</button>

<p id="wiki-body"></p>
<div id="audio"></div>

注意：上面代码片段的Speak功能无法执行。因为我找不到该speak.js脚本的免费 CDN。请在客户端执行代码。

推荐阅读