Question

我为免费代码营建立一个随机报价机。我需要一个产生随机引用的按钮和另一个将随机引号之一发布到twitter的按钮。我的随机引用按钮似乎工作正常。我已经开始使用twitter按钮了，但是马上遇到了路障。我试图存储＆＃34; p＆＃34;的价值。元素，即引用，变成一个变量，所以我可以用它来构建按钮的其余部分。我试图记录元素的值只是为了看它是否有效但它返回＆＃34; undefined＆＃34;是否存在报价。我试图以一种不同的方式操纵document.getElementById().value方法，但似乎无法让它返回一个字符串。任何洞察它为什么只返回undefined会有所帮助。谢谢！

这是我的HTML

<!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>Random Quote Machine</title>
  <link rel="stylesheet" style="text/css" href="main.css">
</head>
<body>
  <div class="main-header">
    <h1>Random Quote Machine</h1>
  </div>
  <div class="main-content" id="main-content">
    <p class="text" id="text"></p>
  </div>

  <button type="submit" class="quote-button" id="quote-button">New Quote</button>
  <button type="submit" class="twitter-button" id="twitter-button">Twitter</button>

  <script type="text/javascript" src="script.js"></script>
</body>
</html>

这是我到目前为止的Javascript

const btn = document.getElementById('quote-button');
const content = document.getElementById('text');
let strValue = document.getElementById('text').value;
const twitter = document.getElementById('twitter-button');

// New Quote Button Event Listener

btn.addEventListener('click', function () {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'http://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en');
  xhr.onload = function () {
    var data = JSON.parse(xhr.responseText);
    const quote = data.quoteText + data.quoteAuthor;
    getQuote(quote);

  };

  xhr.send();
});

function getQuote(newQuote) {
  content.textContent = newQuote;
}

// Twitter Button Event Listener

twitter.addEventListener('click', function () {
  console.log(strValue);
});

Answer 1

p元素没有值属性。试试innerHTML ......

Answer 2

在我的代码中，我使用函数更新了引用文本和作者名称，并在我想要共享推文时使用这些变量。

希望有所帮助！

HTML：

tax_incl

JS：

<div class= "container">

<div class="card bg-dark text-white">
  <img class="card-img" src="https://static1.squarespace.com/static/5ab008d6697a9880a9f8c364/t/5abc6961aa4a99a0ab790df2/1522693072256/background-for-quotes-5.jpg" alt="Card image">
  <div class="card-img-overlay">
    <h5 class="card-title">Quote of the day!</h5>
    <blockquote class="blockquote mb-0">
    <p id ="quote" class="card-text"></p>
    <p id ="author" class="card-text"></p>
    <button id = "quote_button" type="button" class="btn btn-secondary" >Click me to get a quote</button>
  <a id = "tweet_btn" ><button type="button" class="btn btn-secondary">
Tweet the quote </button>
</a> 
  </div>
      </blockquote>
  </div>
</div>

</div>

元素值返回未定义的javascript

2 个答案: