stackoom
  简体   繁体   中英

I can`t figure out why my social media share links don`t work

 原文  2021-04-12 09:15:08  3   1    javascript/ html/ css

Question

I am making a simple wbsite that generates random quotes/facts when the user clicks a button. recently I tried to add links that will copy said quotes/facts into Facebook or Twitter, so that the user can share them. The thing is that the links do not seem to work and I have tried my best to figure out why, but am out if ideas. I would gladly apperciate some help

 function clicked() { //Her er banken med sitatene let quotes = ["Test 1", "Test 2", "Test 3", ]; // Denne velger ut et tilfeldig sitat let quotes_random = quotes[Math.floor(Math.random() * quotes.length)]; //let = quotes[Math.floor(Math.random() * quotes.length)]; // Denne omgjør det tilfeldige sitatet til HTML document.getElementById("output").innerHTML = quotes_random; //document.getElementByID("output").innerHTML = quotes_random; } // Social media: setShareLinks(); function socialWindow(url) { var left = (screen.width - 570) / 2; var top = (screen.height - 570) / 2; var params = "menubar=no,toolbar=no,status=no,width=570,height=570,top=" + top + ",left=" + left; window.open(url,"NewWindow",params); } function setShareLinks() { var pageUrl = encodeURIComponent(document.URL); var tweet = encodeURIComponent($("meta[property='og:description']").attr("content")); $(".social-share.facebook").on("click", function() { url = "https://www.facebook.com/sharer.php?u=" + pageUrl; socialWindow(url); }); $(".social-share.twitter").on("click", function() { url = "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + tweet; socialWindow(url); }) }
 body { background-image: url(media/90s_bakgrunn_til_nettside.jpg); background-position: center; } #container { height: 275px; width: 750px; margin: 0 auto; border: 5px solid #673B90; text-align: center; background-color:#F5A01F; position: relative; top: 300px; align-self: center; } #btn { background-color: #fdfb76; border: none; outline: none; margin: 50px auto; height: 50px; width: 250px; font-size: 22px; position: relative; top: 250px; align-self: center; } #btn:hover { cursor: pointer; cursor: hand; background-color: #e10086; } #output { margin: 25px auto; font-size: 26px; color: white; text-align: center; position: relative; bottom: -120px; align-self: center; } /* Social media*/ body { width: 95%; max-width: 700px; font-family: tahoma, sans-serif; font-size: 14px; line-height: 1.4; padding: 0 10px 20px 10px; margin: 0 auto 0 auto; } h1 { font-size: 24px; text-align: center; } h1 span { display: block; font-size: 18px; font-weight: normal; }.links li { font-size: 16px; text-align: center; cursor: pointer; cursor: hand; color: yellow; }.links li:hover { text-decoration: underline; }
 <.DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="style,css"> <meta name="viewport" content="width=device-width. initialscale=1"> <div class="links"> <ul> <li class="social-share facebook">Facebook</li> <li class="social-share twitter">Twitter</li> </ul> </div> </head> <body> <div id="container"> <button onclick="clicked()" id="btn">Trykk her for et visdomord</button> </div> <p id="output">Generer et visdomsord ved å trykke på knappen</p> <script src="main.js"></script>

1 answers

solution1
 1  2021-04-12 11:54:57

just add jquery by:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

just in snippet not working. here the link of jsfiddle

 function clicked() { //Her er banken med sitatene let quotes = ["Test 1", "Test 2", "Test 3", ]; // Denne velger ut et tilfeldig sitat let quotes_random = quotes[Math.floor(Math.random() * quotes.length)]; //let = quotes[Math.floor(Math.random() * quotes.length)]; // Denne omgjør det tilfeldige sitatet til HTML document.getElementById("output").innerHTML = quotes_random; //document.getElementByID("output").innerHTML = quotes_random; } // Social media: setShareLinks(); function socialWindow(url) { var left = (screen.width - 570) / 2; var top = (screen.height - 570) / 2; var params = "menubar=no,toolbar=no,status=no,width=570,height=570,top=" + top + ",left=" + left; window.open(url,"NewWindow",params); } function setShareLinks() { var pageUrl = encodeURIComponent(document.URL); var tweet = encodeURIComponent($("meta[property='og:description']").attr("content")); $(".facebook").on("click", function() { url = "https://www.facebook.com/sharer.php?u=" + pageUrl; socialWindow(url); }); $(".twitter").on("click", function() { url = "https://twitter.com/intent/tweet?url=" + pageUrl + "&text=" + tweet; socialWindow(url); }) }
 body { background-image: url(media/90s_bakgrunn_til_nettside.jpg); background-position: center; } #container { height: 275px; width: 750px; margin: 0 auto; border: 5px solid #673B90; text-align: center; background-color:#F5A01F; position: relative; top: 300px; align-self: center; } #btn { background-color: #fdfb76; border: none; outline: none; margin: 50px auto; height: 50px; width: 250px; font-size: 22px; position: relative; top: 250px; align-self: center; } #btn:hover { cursor: pointer; cursor: hand; background-color: #e10086; } #output { margin: 25px auto; font-size: 26px; color: white; text-align: center; position: relative; bottom: -120px; align-self: center; } /* Social media*/ body { width: 95%; max-width: 700px; font-family: tahoma, sans-serif; font-size: 14px; line-height: 1.4; padding: 0 10px 20px 10px; margin: 0 auto 0 auto; } h1 { font-size: 24px; text-align: center; } h1 span { display: block; font-size: 18px; font-weight: normal; }.links li { font-size: 16px; text-align: center; cursor: pointer; cursor: hand; color: yellow; }.links li:hover { text-decoration: underline; }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <.DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="style,css"> <meta name="viewport" content="width=device-width. initialscale=1"> <div class="links"> <ul> <li class="social-share facebook">Facebook</li> <li class="social-share twitter">Twitter</li> </ul> </div> </head> <body> <div id="container"> <button onclick="clicked()" id="btn">Trykk her for et visdomord</button> </div> <p id="output">Generer et visdomsord ved å trykke på knappen</p> <script src="main.js"></script>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question clearInterval() doesn't work and I can't figure out why My code for autorole doesn't work and I can't figure out why Why won't my character move? I can't figure out why my Rigidbody 2D won't work My simple routing is not working and I can't figure out why I can't figure why my code does not work Javascript links stopped working, can't figure out why Why don't these 3 links work? Can't figure out why my ROT13 converter works with lowercase but it doesn't work with uppercase Can't figure out why React code doesn't work My javascript code won't push elements to my array and I can't figure out why?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM