元素值返回未定義的javascript

Question

我正在為Free Code Camp構建隨機報價機。 我需要一個按鈕生成隨機報價，另一個按鈕將隨機報價之一發布到Twitter。 我的隨機報價按鈕似乎工作正常。 我已經開始使用Twitter按鈕，但是馬上遇到了障礙。 我試圖將“ p”元素的值（即引號）存儲到變量中，以便可以使用它來構建按鈕的其余部分。 我試圖記錄該元素的值只是為了查看它是否起作用，但是無論是否存在引號，它都會返回“ undefined”。 我試圖以多種不同的方式來操作document.getElementById().value方法，但似乎無法使它返回字符串。 為什么只返回未定義的原因的任何見解都會有所幫助。 謝謝！

這是我的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元素沒有value屬性。 嘗試innerHTML ...

Answer 2

在我的代碼中，我使用函數更新了Quote Text和Author名稱，並在想要共享推文時使用了這些變量。

希望有幫助！

HTML：

<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>

JS：

var jd;
var currentQuote;
var currentAuthor;

var data = {
   method: "getQuote", 
   lang: "en" ,
   format:"jsonp",
   dataType: "jsonp"
};

var texttotweet;

$("#quote_button").on("click", function(){
      // Only change code below this line.
      getthequote(); 
      console.log(currentQuote);

      }); 

 function getthequote() {

  $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?", data, function(jd) {
  $('#quote').html('<p>'+ jd.quoteText + '</p>');
  $('#author').html('<p>-' + jd.quoteAuthor + '</p>');
   quotedata(jd.quoteText , jd.quoteAuthor );
   });
 }  



function quotedata(quote, author ) 
{
currentQuote =  quote;
currentAuthor = author;
}


 $('#tweet_btn').on("click", function(){
  $(this).attr("href", "https://twitter.com/intent/tweet?text=" + "The Quote:"  +  currentQuote + ". The Author :" +  currentAuthor );
    console.log("Testing out the code"); 
  });

元素值返回未定義的javascript

問題描述

2 個解決方案

解決方案1
0 2018-01-15 21:54:20

解決方案2
0 2018-05-25 09:19:47

元素值返回未定義的javascript

問題描述

2 個解決方案

解決方案1 0 2018-01-15 21:54:20

解決方案2 0 2018-05-25 09:19:47

解決方案1
0 2018-01-15 21:54:20

解決方案2
0 2018-05-25 09:19:47