代码之家 › 专栏 › 技术社区 › peachykeen

在按钮按下后获取段落文本并将其传递到javascript函数中

html javascript

peachykeen · 技术社区 · 6 年前

speak.js speak()

<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 说话() 功能参数。

我该怎么做呢?

编辑 (添加更多代码):

下面是我用来填充段落的相应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>

1 回复 | 直到 6 年前

Kavian K. 6 年前

<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 无法执行上面代码段的函数。因为我找不到免费的cdn speak.js