时间戳

首页 > 解决方案 > 尝试通过代码构建 HTML 元素，包括函数

javascript - 尝试通过代码构建 HTML 元素，包括函数

问题描述

这是我的第一篇文章，希望有人可以帮助我：

我希望构建一个 Web 项目，其中所有 HTML 元素都存储在数据库中并从中获取以构建网页。

我发现按钮有问题，我找不到存储按钮功能的方法，我正在使用 Jquery 构建元素，现在测试元素定义是在我在 Js 开头留下的一些数组中模拟的文件，我可以使按钮工作的唯一方法是，如果函数在 Js 文件中被硬编码，有没有办法让我也从数据库中获取函数？并将它们放在一个数组中？

这是我的项目示例：

HTML

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--script src="functions.js"></script-->
<script src="system.js"></script>
<!--script src="elements.js"></script-->

</head>
<body>

<body onload="addElements()">

  <div id="div1"></div>

</body>
</html>

JS文件

/**
VARIABLE DEFINITIONS
THESE ARE SUPPOSED TO COME FROM A DATABASE
STILL UNKNOWN HOW TO BRING THE FUNCTIONS, AS STRING THEY ARE NOT ALLOWED. FOR NOW THERE ARE TEST FUNCTIONS.
**/

let buttonIds = ['btn1', 'btn2'];
let buttonText = ['Show Text', 'Show HTML'];
let buttonFunc = [alert1, alert2];
//let buttonFunc = ['alert("Hi");', 'alert("Hello");'];
let paragraphs = ['This is some <b>bold</b> text in a paragraph.', 'another <b>bold</b> test'];


//HELPER FUNCTIONS
// **** THESE ARE SUPPOSED TO COME FROM DATABASE, UNKNOWN HOW TO DO IT. ****

function alert1() {
    alert("Hi");
}

function alert2(){
    alert("Hello");
}




function addElements(){ 
    for(var p=0; p<paragraphs.length; p++){ addParagraphs('#div1', paragraphs[p]);                  }
    for(var i=0; i<buttonIds.length; i++) { createButton( '#div1', buttonIds[i]  , buttonText[i]);  }
}

// ANY ELEMENTS FUNCTION IS DEFINED HERE ONCE THE PAGE IS LOADED.
$(document).ready(function(){
    for(var x=0;x<buttonIds.length; x++){ activateButton(buttonIds[x], buttonFunc[x]); }
});


//HELPER FUNCTIONS USED TO BUILD THE HTML ELEMENTS ON THE MAIN PAGE.
function addParagraphs(location, text){
  $(location).append('<p id="test">'+text+'</p>');
}


function createButton(location, id, text){
var definition;

definition = "<button id="+id+">"+text+"</button>";
$(location).append(definition);
}


function activateButton(buttonId, functionName){
  var composedId = "#"+buttonId;
    $(composedId).click(functionName);
}

标签： javascriptjqueryhtml

解决方案

您可以使用所需的所有功能生成 Javascript 文件服务器端。假设 Node.js 你可以做这样的事情：

expressApp.get("some.js", (req, res) => {
  getDataFromDatabase() // depends on your database
  .then(data => {
    let body = 'function your_fn () { alert("'+ JSON.stringify(data) +'")}';
    res.send(body);
  }) 
});

推荐阅读