如何添加 Twitter 共享功能以使用由 JavaScript 动态生成到 div 中的字符串？

Question

有一个基于 JavaScript 的赞美生成器，只需单击一个按钮即可生成新的赞美。用户可以不断地产生新的赞美，直到他们得到一个他们喜欢的。

我想添加通过 Twitter 分享任何生成的赞美的选项，但我不确定如何将赞美文本添加到 Twitter 共享器 link。目前，赞美文字仅显示在具有特定 ID 的 div 中。

生成的赞美输出到 ID 为 "compliment" 的 DIV，并且正在按我的要求工作。但是，我不知道如何将赞美文本也输出到 Twitter 共享中 link——尤其是当文本的格式需要与它在 div 中的显示方式不同时）。

我已经设置了两个 jsfiddles 以及我目前取得的进展。

这是我的第一次尝试：

这是 fiddle 中的 JavaScript:

var Complimenter = primish({
  a: 'lovely,beautiful,gorgeous,kind,wonderful,nice,perfect'.split(','),
  b: 'good-looking,super-duper,awesome'.split(','),
  c: 'pal,friend,person,human'.split(','),
  d: 'improver,supporter,juggler'.split(','),

  combos: ['a,b,c', 'a,b,d', 'b,c', 'b,d'],

  constructor: function(element) {
    element && (this.element = element);
    this.combos = this.combos.map(function(c) {
      return c.split(',')
    });
    this.compliment();
  },

  compliment: function(e) {
    e && e.preventDefault();
    var compliment = this.get();

    this.element && (this.element.innerHTML = compliment);

    return compliment;
  },

  get: function() {
    var c = this.combos,
      self = this;

    return c[Math.random() * c.length >> 0].map(function(k) {
      return self[k][Math.random() * self[k].length >> 0]
    }).join(' ');
  }
});

(function() {
  var complimenter = new Complimenter(document.getElementById('compliment'));
  document.querySelector('.heading').addEventListener('click', complimenter.compliment.bind(complimenter));
}());

我从原来的 fiddle 更改了 Twitter 分享 link，然后将这个新变量添加到 JS：

var link = "https://twitter.com/intent/tweet?hashtags=compliment&related=complimenttime&text=" + complimenter;
document.getElementById('tweet').setAttribute("href", link); //assigns url above as href to twitter button
document.getElementById('compliment').innerHTML = "<span class='bold'>" + complimenter + "</span>" + "<br />";

该更改的 fiddle 在这里 http://jsfiddle.net/LosHantos/catx520n/ （我的第二次尝试）

但是，我遇到的问题是：

它显示字符串 [object object] 而不是恭维语
如果您点击 generate a new compliment，恭维会取代 [object object]，但 Twitter 分享者仍然使用 [object object]

Answer 1

那是因为您拼接对象 complimenter 而不是其输出 - 您通过调用 complimenter.get().

获得

另一件事你想展示和分享相同的赞美，但每个 get() returns 不同的赞美所以你需要 get 一次并用它来呈现 div的html和也将它传递给link的href.

const compliment = complimenter.get();
var link = "https://twitter.com/intent/tweet?hashtags=compliment&related=complimenttime&text=" + compliment;
document.getElementById('tweet').setAttribute("href", link); //assigns url above as href to twitter button
document.getElementById('compliment').innerHTML = "<span class='bold'>" + compliment + "</span>" + "<br />";

工作代码：

// idea + dictionary by hnldesign from b3ta
var Complimenter = primish({
    a:  'lovely,beautiful,gorgeous,kind,wonderful,nice,perfect'.split(','),
    b: 'good-looking,super-duper,awesome'.split(','), 
    c: 'pal,friend,person,human'.split(','),
    d: 'improver,supporter,juggler'.split(','),
    
    combos: ['a,b,c', 'a,b,d', 'b,c', 'b,d'],

    constructor: function(element){
        element && (this.element = element);
        this.combos = this.combos.map(function(c){return c.split(',')});
        this.compliment();
    },

    compliment: function(e){
        e && e.preventDefault();
        var compliment= this.get();
        
        this.element && (this.element.innerHTML = compliment);
     reGenerateLink(compliment);      
        return compliment;
    },
    
    get: function(){
        var c = this.combos, 
            self = this;
        
        return c[Math.random()*c.length>>0].map(function(k){
            return self[k][Math.random()*self[k].length>>0]
        }).join(' ');    
    }        
});

(function(){
    var complimenter = new Complimenter(document.getElementById('compliment'));
    document.querySelector('.heading').addEventListener('click', complimenter.compliment.bind(complimenter));
    
    const compliment = complimenter.get();
 reGenerateLink(compliment);
  //assigns url above as href to twitter button
 document.getElementById('compliment').innerHTML = "<span class='bold'>" + compliment + "</span>" + "<br />";
}());

function reGenerateLink(compliment) {
    var link = "https://twitter.com/intent/tweet?hashtags=compliment&related=complimenttime&text=" + compliment;
 document.getElementById('tweet').setAttribute("href", link); 
}

@import url(http://fonts.googleapis.com/css?family=Russo+One);
* {
  font-family: arial;
  font-weight: bold;
}

body,
html {
  height: 100%;
  margin: 0;
}

body {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHhtbG5zOnhsaW5rPSdodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJz4KICA8ZGVmcz4KICAgIDxnIGlkPSdhJz4KICAgICAgPHBhdGggZD0nTTUgNmwtNiAtNiB2LTIgbDYgNicgZmlsbC1vcGFjaXR5PScwJyBzdHJva2U9JyMyYjNhNzUnIC8+CiAgICAgIDxwYXRoIGQ9J001IDVsNiAtNiB2LTIgbC02IDYnIGZpbGwtb3BhY2l0eT0nMCcgc3Ryb2tlPScjMzE0MTdkJyAvPgogICAgPC9nPgogICAgPHBhdHRlcm4gcGF0dGVyblVuaXRzPSd1c2VyU3BhY2VPblVzZScgeD0nMCcgeT0nMCcgaWQ9J3AnIHdpZHRoPScyMCcgaGVpZ2h0PScyMCcgdmlld0JveD0nMCAwIDEwIDEwJz4KICAgICAgPHVzZSB4bGluazpocmVmPScjYScvPiAgCiAgICAgIDx1c2UgeGxpbms6aHJlZj0nI2EnIHk9Jy00Jy8+CiAgICAgIDx1c2UgeGxpbms6aHJlZj0nI2EnIHk9JzQnLz4KICAgICAgPHVzZSB4bGluazpocmVmPScjYScgeT0nOCcvPgogICAgICA8dXNlIHhsaW5rOmhyZWY9JyNhJyB5PScxMicvPgogICAgPC9wYXR0ZXJuPgogICAgPHJhZGlhbEdyYWRpZW50IGdyYWRpZW50VW5pdHM9J3VzZXJTcGFjZU9uVXNlJyBpZD0nZycgY3g9JzUwJScgY3k9JzUwJScgZng9JzMwJScgZnk9JzMwJScgcj0nNjAlJz4KICAgICAgPHN0b3Agb2Zmc2V0PScwJScgc3RvcC1jb2xvcj0nI2FhYWFhYScgc3RvcC1vcGFjaXR5PScuNScgLz4KICAgICAgPHN0b3Agb2Zmc2V0PScxMDAlJyBzdG9wLWNvbG9yPScjMDAwMDAwJyBzdG9wLW9wYWNpdHk9Jy43JyAvPgogICAgICA8L3JhZGlhbEdyYWRpZW50PgogIDwvZGVmcz4KICA8cmVjdCB4PSctNSUnIHk9Jy01JScgd2lkdGg9JzExMCUnIGhlaWdodD0nMTEwJScgZmlsbD0nIzAwMDAyMicvPgogIDxyZWN0IHdpZHRoPScxMTAlJyBoZWlnaHQ9JzExMCUnIGZpbGw9J3VybCgjcCknLz4KICA8cmVjdCB4PSctNSUnIHk9Jy01JScgd2lkdGg9JzExMCUnIGhlaWdodD0nMTEwJScgZmlsbD0ndXJsKCNnKScvPgo8L3N2Zz4=');
}

.box {
  text-align: center;
  width: 600px;
  height: 276px;
  color: rgba(255, 255, 255, .7);
  text-shadow: 1px 1px 5px rgba(0, 0, 0, .7);
}

#compliment {
  font-family: "Russo One";
  text-transform: uppercase;
  font-size: 4em;
}

button.heading {
  outline: none;
  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  padding: 5px;
  border: 1px solid #808080;
  background-color: #f5f5f5;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  font-size: 14px;
  font-family: "Russo One";
  text-transform: uppercase;
  margin: 15px auto 50px;
}

.ac {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.twitter-share a,
.twitter-share a:visited {
  color: #fff;
}

<script src="https://rawgit.com/DimitarChristoff/primish/master/primish-min.js"></script>
<div class="ac box">
  Random compliment generator. <br/>Generate compliments until you get one you like.<br/>
  <button class="heading">
        generate new compliment
    </button>

  <div id="compliment"></div>

  <div>
    <a target="_blank" role="button" class="btn btn-info my-btn" id="tweet"><i class="fa fa-twitter"></i> Tweet this</a>
  </div>
</div>

http://jsfiddle.net/moshfeu/n71L9skg/6/

如何添加 Twitter 共享功能以使用由 JavaScript 动态生成到 div 中的字符串？

How can I add a Twitter Share feature to use a string dynamically generated into a div by JavaScript?

javascript

twitter

generator

twitter-share