자바 스크립트 트위터 버튼

Question

자바 스크립트로 동적 트위터 버튼을 만드는 데 문제가 있습니다. 트위터 버튼을 사용하여 내가 프로그래밍하고있는 계산기의 출력을 트윗하도록하려고합니다. 문제는 버튼이 나타나지 않는다는 것입니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까? 도와주세요.

var twit_link = document.createElement('a'); 
    twit_link.setAttribute('href', 'https://www.twitter.com/share'); 
    twit_link.setAttribute('class', 'twitter-share-button'); 
    twit_link.setAttribute('url', 'http://www.twitter.com/obamamakes'; 
    twit_link.setAttribute('data-count', 'none'); 
    twit_link.setAttribute('data-via', 'ObamaMakes'); 
    twit_link.setAttribute('data-text', 'In the time it takes me to ' + activity + ', Barack Obama makes $' + i.toFixed(1); 
    twit_link.innerHTML = "Tweet"; 

    $("#CalcOutput").html("In the time it takes me to <span class=\"num\">" + activity + "</span>,<br />Barack Obama makes $<span class=\"num\">" + i.toFixed(1) + "</span>"); 

    $("#CalcOutput").append(twit_link); 

나는 모두가 제안한 변경 사항을 만들었지 만, 계산기가 생성해야하는 전체 출력물은 여전히 ​​트위터 버튼과 함께 나타나지 않습니다. 계산기 코드도 제공해야합니까?

Answer 1

몇 가지 구문 오류가 있습니다. 어쨌든 jQuery를 사용하는 경우 다음을 수행 할 수 있습니다.

var twit_link = $('<a>Tweet</a>'); 
twit_link.attr('href', 'https://www.twitter.com/share'); 
twit_link.attr('class', 'twitter-share-button'); 
twit_link.attr('url', 'http://www.twitter.com/obamamakes'); 
twit_link.data('count', 'none'); 
twit_link.data('via', 'ObamaMakes'); 
twit_link.data('text', 'In the time it takes me to ' + activity + ', Barack Obama makes $' + i.toFixed(1)); 

$("#CalcOutput").html("In the time it takes me to <span class=\"num\">" + activity + "</span>,<br />Barack Obama makes $<span class=\"num\">" + i.toFixed(1) + "</span>"); 
$("#CalcOutput").append(twit_link); 

Answer 2

구문이 잘못되었습니다. 몇 가지 결말이 없습니다.

var twit_link = document.createElement('a'); 
    twit_link.setAttribute('href', 'https://www.twitter.com/share'); 
    twit_link.setAttribute('class', 'twitter-share-button'); 
    twit_link.setAttribute('url', 'http://www.twitter.com/obamamakes'); // missing) here 
    twit_link.setAttribute('data-count', 'none'); 
    twit_link.setAttribute('data-via', 'ObamaMakes'); 
    twit_link.setAttribute('data-text', 'In the time it takes me to ' + activity + ', Barack Obama makes $' + i.toFixed(1)); // missing) here 
    twit_link.innerHTML = "Tweet"; 

    $("#CalcOutput").html("In the time it takes me to <span class=\"num\">" + activity + "</span>,<br />Barack Obama makes $<span class=\"num\">" + i.toFixed(1) + "</span>"); 

    $("#CalcOutput").append(twit_link); 

브라우저의 개발자 도구를 통해 확인할 수 있습니다. 콘솔에 오류가 표시됩니다.

압둘라가 언급 한 바와 같이

, 어쨌든이 모든 것을 할 jQuery를 사용할 수 있습니다

var twit_link = $('<a/>', { 
    href: 'https://www.twitter.com/share', 
    'class': 'twitter-share-button', 
    url: 'http://www.twitter.com/obamamakes', 
    'data-count': 'none', 
    'data-via': 'ObamaMakes', 
    'data-text': ... // whatever you want here 
    }).text('Tweet'); 
$("#CalcOutput").html("In the time it takes me to <span class=\"num\">" + activity + "</span>,<br />Barack Obama makes $<span class=\"num\">" + i.toFixed(1) + "</span>"); 
$("#CalcOutput").append(twit_link); 

jsFiddle Example

Answer 3

jsFiddle 사용 JQuery와 (전용) :

$(document).ready(function(){ 
//TEst Data - Starts 
    var activity = 'Test'; 
    var i = 12; 
//Test Data Ends 
var twit_link = $('<a />'); 
twit_link.attr('href', 'https://www.twitter.com/share'); 
twit_link.addClass('twitter-share-button'); 
twit_link.attr('url', 'http://www.twitter.com/obamamakes'); 
twit_link.attr('data-count', 'none'); 
twit_link.attr('data-via', 'ObamaMakes'); 
twit_link.attr('data-text', 'In the time it takes me to ' + activity + ', Barack Obama makes $' + i.toFixed(1)); 
    twit_link.html('Tweet'); 

$("#CalcOutput").html("In the time it takes me to <span class=\"num\">" + activity + "</span>,<br />Barack Obama makes $<span class=\"num\">" + i.toFixed(1) + "</span>"); 
$("#CalcOutput").append(twit_link); 

});