Fatal编程技术网
  • javascript/
  • Javascript 将JSFIDLE代码转换为HTML

Javascript 将JSFIDLE代码转换为HTML

javascript html

Javascript 将JSFIDLE代码转换为HTML,javascript,html,jsfiddle,Javascript,Html,Jsfiddle,以下内容在JSFIDLE中可用，但在我的站点上使用它时不起作用 HTML 事件日期： 活动名称： 说明： PDF的URL: 缩略图的URL： 获取代码 JS $（“#创建html”）。单击（函数（）{ var date=''+$（“#date”）.val（）+''； var header=''+$（“#header”）.val（）+''； var desc=''+$（“#desc”）.val（）+''； 变量url\u用于事件=''； $（“#结果”）.text（日期+标题+描述+

以下内容在JSFIDLE中可用，但在我的站点上使用它时不起作用

HTML

事件日期：


活动名称：


说明：


PDF的URL:


缩略图的URL：


获取代码
JS

$（“#创建html”）。单击（函数（）{
var date='
'+$（“#date”）.val（）+'
'；
var header='
'+$（“#header”）.val（）+'
'；
var desc='
'+$（“#desc”）.val（）+'
'；
变量url\u用于事件='
    • '；
$（“#结果”）.text（日期+标题+描述+url（用于_事件）；
});
我意识到其他人已经指出onLoad必须改为NoWrap-in，但我不知道如何将JS转换为与实时站点一起工作。我为我缺乏JS知识提前表示歉意，我非常感谢您抽出时间。

首先不要忘了包括jQuery，因为您正在JS中使用它

然后，您可以将JS直接包含到HTML页面的
标记中我看到有一个jQuery依赖项；也许你需要将其添加到HTML中

有关详细信息。

HTML文件中的任何javascript都应包装在
标记中。此外，您还需要包括jQuery库，因为它看起来像您正在使用它，并且可能需要将代码包装在
$（document）.ready（）或类似文件中。

我建议您在这里开始学习“安装”/“使用jQuery”的基本知识：

从外观上看，您是否在引用JS代码的东西的HTML端有脚本标记

将该函数放在一个.js文件中，通过HTML文档中的
标记引用它，这样它就可以被集成和使用

并在HTML文档顶部使用适当的jQuery库。看起来您已经达到了目标，并且具有正确的功能/想法，但是您需要导入这些内容，以便在运行时使其正常工作。

确保包含jQuery库。在您的小提琴中，您使用的是2.1，因此请尝试将jQuery 2.1包含到您的.html文件中，如下所示：

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
查看您是否有类似的问题，并修复可能出现的错误

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
    <script src="yourscript.js" type="text/javascript"></script>
</head>
<body>
    Event Date:<input type="text" id="date" />
    <br />
    Event Title:<input type="text" id="header" />
    <br />
    Description:<input type="text" id="desc"/>
    <br />
    URL for PDF:<input type="text" id="url_for_pdf" />
    <br />
    URL for Thumbnail Image:<input type="text" id="url_for_thumb" />
    <br />
    <button id="create-html">Get Code</button>
    <div id="result"></div>
</body>
</html>


文件
活动日期：


活动名称：


说明：


PDF的URL:


缩略图的URL：


获取代码
yourscript.js

$( "#create-html" ).click(function() {
    var date = '<div class="singleevent"><p class="date">' + $("#date").val() + '</p>';
    var header = '<p class="header">' + $("#header").val() + '</p>';
    var desc = '<p class="desc">' + $("#desc").val() +'</p>';

    var url_for_event = '<ul><li><a href="#"><img src="http://www.example.com/-/i/social-mail.png" width="17" height="13" alt=""/></a></li><li><a href="#"><img src="http://www.example.com/-/i/social-fb.png" width="17" height="13" alt=""/></a></li> <li><a href="#"><img src="http://www.example.com/-/i/social-twitter.png" width="16" height="13" alt=""/></a></li><li><a href="' + $("#url_for_pdf").val() +'"><img src="http://www.example.com/-/i/social-download.png" width="13" height="13" alt=""/></a></li></ul><span class="img"><a href="' + $("#url_for_pdf").val() +'"><img src="'+ $("#url_for_thumb").val() + '"" alt=""/></a></span></div>';

    $( "#result" ).text(date + header + desc + url_for_event);
});

$（“#创建html”）。单击（函数（）{
var date='
'+$（“#date”）.val（）+'
'；
var header='
'+$（“#header”）.val（）+'
'；
var desc='
'+$（“#desc”）.val（）+'
'；
变量url\u用于事件='
    • '；
$（“#结果”）.text（日期+标题+描述+url（用于_事件）；
});
如果您试图将小提琴转换为HTML文档，最简单的方法是右键单击
输出
帧并查看帧源（取决于浏览器，它可能不同；在Chrome上，它是
查看帧源
）

这将显示您可以复制并粘贴到.html文档中的实际源代码。尽管您可能需要删除该行


-爵士小提琴的JSFIDLE演示
//  
活动日期：


活动名称：


说明：


PDF的URL:


缩略图的URL：


获取WordPress的代码
您到底有什么问题？如果JS正在计算
未定义的
，那么是的，您应该将其包装在jQuery
ready（）
函数中，请参阅。您是否已经在
标记之间包含脚本<代码>转到，查看源代码，这是根据您的小提琴的内容呈现的内容。您的网页中是否包含jQuery？+1用于JSFIDLE的
/show
，我不知道！ 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
    <script src="yourscript.js" type="text/javascript"></script>
</head>
<body>
    Event Date:<input type="text" id="date" />
    <br />
    Event Title:<input type="text" id="header" />
    <br />
    Description:<input type="text" id="desc"/>
    <br />
    URL for PDF:<input type="text" id="url_for_pdf" />
    <br />
    URL for Thumbnail Image:<input type="text" id="url_for_thumb" />
    <br />
    <button id="create-html">Get Code</button>
    <div id="result"></div>
</body>
</html>

$( "#create-html" ).click(function() {
    var date = '<div class="singleevent"><p class="date">' + $("#date").val() + '</p>';
    var header = '<p class="header">' + $("#header").val() + '</p>';
    var desc = '<p class="desc">' + $("#desc").val() +'</p>';

    var url_for_event = '<ul><li><a href="#"><img src="http://www.example.com/-/i/social-mail.png" width="17" height="13" alt=""/></a></li><li><a href="#"><img src="http://www.example.com/-/i/social-fb.png" width="17" height="13" alt=""/></a></li> <li><a href="#"><img src="http://www.example.com/-/i/social-twitter.png" width="16" height="13" alt=""/></a></li><li><a href="' + $("#url_for_pdf").val() +'"><img src="http://www.example.com/-/i/social-download.png" width="13" height="13" alt=""/></a></li></ul><span class="img"><a href="' + $("#url_for_pdf").val() +'"><img src="'+ $("#url_for_thumb").val() + '"" alt=""/></a></span></div>';

    $( "#result" ).text(date + header + desc + url_for_event);
});

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by jazzviolin</title>

  <script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>

  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>

  </style>



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$( "#create-html" ).click(function() {
    var date = '<div class="singleevent"><p class="date">' + $("#date").val() + '</p>';
    var header = '<p class="header">' + $("#header").val() + '</p>';
    var desc = '<p class="desc">' + $("#desc").val() +'</p>';

    var url_for_event = '<ul><li><a href="#"><img src="http://www.example.com/-/i/social-mail.png" width="17" height="13" alt=""/></a></li><li><a href="#"><img src="http://www.example.com/-/i/social-fb.png" width="17" height="13" alt=""/></a></li> <li><a href="#"><img src="http://www.example.com/-/i/social-twitter.png" width="16" height="13" alt=""/></a></li><li><a href="' + $("#url_for_pdf").val() +'"><img src="http://www.example.com/-/i/social-download.png" width="13" height="13" alt=""/></a></li></ul><span class="img"><a href="' + $("#url_for_pdf").val() +'"><img src="'+ $("#url_for_thumb").val() + '"" alt=""/></a></span></div>';

    $( "#result" ).text(date + header + desc + url_for_event);
});
});//]]>  

</script>


</head>
<body>
  Event Date:<input type="text" id="date" />
<br />
Event Title:<input type="text" id="header" />
<br />
Description:<input type="text" id="desc"/>
<br />
URL for PDF:<input type="text" id="url_for_pdf" />
<br />
URL for Thumbnail Image:<input type="text" id="url_for_thumb" />
<br />
<button id="create-html">Get Code for WordPress</button>

<div id="result"></div>

</body>


</html>