显示来自 object 的随机内容

Question

I saw in a project a function that promoted random values from different objects in JavaScript and display content inside HTML tag,I want to make something like that but different.我在一个项目中看到了一个 function，它提升了 JavaScript 中不同对象的随机值，并在 HTML 标签内显示内容，我想做类似但不同的东西。 When I a button to take random value to a single object and display it inside a div.当我一个按钮将随机值设为单个 object 并将其显示在 div 中时。

I create some object in JS and a action when click a button display object but I don't know how to put all content inside a div and to take random information.我在 JS 中创建了一些 object 并在单击按钮时显示 object 但我不知道如何将所有内容放入 div 并获取随机信息。

 function deosebitProject() { var site_1 = { name: "Site 1", url: "https://www.google.ro/", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", site_image: ["https://adpconstruct.ro/wp-content/uploads/2019/07/poza52.jpg", "https://adpconstruct.ro/wp-content/uploads/2019/07/poza52.jpg", "https://adpconstruct.ro/wp-content/uploads/2019/07/poza52.jpg"] } var site_2 = { name: "Site 2", url: "https://www.google.ro/", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", site_image: ["https://adpconstruct.ro/wp-content/uploads/2019/07/poza52.jpg", "https://adpconstruct.ro/wp-content/uploads/2019/07/poza52.jpg", "https://adpconstruct.ro/wp-content/uploads/2019/07/poza52.jpg"] } document.write( '<div class="container">', '<div class="row">', '<div class="col-md-6">', '<h2>' + site_1.name + '</h2>', '<a href="' + site_1.url + '">' + site_1.url + '</a>', '<p>' + site_1.description + '</p>', '</div>', '<div class="col-md-6">', '<img src="' + site_1.site_image[0] + '"><br /> <img src =' + site_1.site_image[1] + '"><br /> <img src = "' + site_1.site_image[2] + '">', '</div>', '</div>', '</div>' ); document.write( '<div class="container">', '<div class="row">', '<div class="col-md-6">', '<h2>' + site_2.name + '</h2>', '<a href="' + site_2.url + '">' + site_2.url + '</a>', '<p>' + site_2.description + '</p>', '</div>', '<div class="col-md-6">', '<img src="' + site_2.site_image[0] + '"><br /> <img src =' + site_2.site_image[1] + '"><br /> <img src = "' + site_2.site_image[2] + '">', '</div>', '</div>', '</div>' ); }

 <:doctype html> <html> <head> <title>Javascript Challange 1</title> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min:css"> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min:js"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script type="text/javascript" src="random,js"></script> </head> <body> <div> <p> Lorem ipsum dolor sit amet. consectetur adipiscing elit, Fusce blandit, erat ac lobortis tristique, eros eros tristique enim. at imperdiet lectus orci fermentum ex, Suspendisse at nisl pretium, congue nunc sit amet. rutrum lectus. Integer eu luctus metus. Duis placerat finibus urna eu euismod. Vestibulum mollis viverra lacinia, Curabitur odio elit, venenatis eget congue sit amet. sagittis bibendum risus. Donec pretium id justo nec elementum. Duis interdum non ligula at imperdiet. Nunc ultricies ac arcu id aliquet. Ut vitae risus magna, Curabitur mollis placerat tortor. nec finibus mi elementum nec, Pellentesque vitae tortor elementum, porttitor magna sit amet. dapibus nisl. Nullam sed dolor id enim tempus porttitor, Curabitur eleifend condimentum nisl. id placerat purus semper sed. Nulla facilisi. Donec vehicula tempor nulla a tempor. Nulla quis rhoncus elit. Aenean sagittis auctor turpis vel pharetra, Donec est nunc, molestie sit amet ullamcorper sed. facilisis nec sapien, Mauris mauris quam, porta sed ante ut. egestas ultricies augue. Pellentesque ornare arcu ac vestibulum mattis. Sed nec malesuada turpis. Cras aliquam turpis nec justo tempus finibus. Morbi et luctus est.Curabitur eget malesuada neque, Lorem ipsum dolor sit amet. consectetur adipiscing elit. Maecenas sed sagittis arcu. Maecenas quis orci quis lorem luctus feugiat placerat in tellus. </p> </div> <div id="our-project"> <button onclick="deosebitProject()">View Project</button> </div> </body> </html>

Answer 1

I don't really understand whout should be random, so I started with a random project display in the container.我不太明白 whoout 应该是随机的，所以我从容器中的随机项目显示开始。

Created an array of the project objects创建了项目对象的数组
Created a function that creates the HTML to be appended to the DOM container创建了一个 function 来创建 HTML 以附加到 DOM 容器
Created a function that sets a random number from 0 to (project) array length, and appends the HTML to the DOM container创建了一个 function 设置从 0 到（项目）数组长度的随机数，并将 HTML 附加到 DOM 容器
Decoupled the event from the DOM by using HTML.addEventListener() , and placed the random function there (on click event)使用HTML.addEventListener()将事件与 DOM 分离，并将随机 function 放在那里（点击事件）

Now, if you press the button, a random project is selected from the array, and it is displayed in the container现在，如果您按下按钮，则会从数组中随机选择一个项目，并将其显示在容器中

 const arr = [{ name: "Site 1", url: "https://www.google.ro/", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", site_image: ["https://adpconstruct.ro/wp-content/uploads/2019/07/poza52.jpg", "https://adpconstruct.ro/wp-content/uploads/2019/07/poza52.jpg", "https://adpconstruct.ro/wp-content/uploads/2019/07/poza52.jpg"] }, { name: "Site 2", url: "https://www.google.ro/", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", site_image: ["https://adpconstruct.ro/wp-content/uploads/2019/07/poza52.jpg", "https://adpconstruct.ro/wp-content/uploads/2019/07/poza52.jpg", "https://adpconstruct.ro/wp-content/uploads/2019/07/poza52.jpg"] } ] const projectHTML = (data) => { let html = '' html += '<div class="container">' html += '<div class="row">' html += '<div class="col-md-6">' html += `<h2>${data.name}</h2>` html += `<a href="${data.url}">${data.url}</a>` html += `<p>${data.description}'</p>` html += '</div>' html += '<div class="col-md-6">' data.site_image.forEach((e, i, a) => { html += `<img src="${data.site_image[i]}"` i === a.length - 1? html += '': html += '<br />' }) html += '</div>' html += '</div>' html += '</div>' return html } function deosebitProject(arr) { const r = Math.floor(Math.random() * arr.length); document.getElementById('content').innerHTML = projectHTML(arr[r]) } const btn = document.getElementById('btn') btn.addEventListener('click', function(e) { deosebitProject(arr) })

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <div> <p id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce blandit, erat ac lobortis tristique, eros eros tristique enim, at imperdiet lectus orci fermentum ex. Suspendisse at nisl pretium, congue nunc sit amet, rutrum lectus. Integer eu luctus metus. Duis placerat finibus urna eu euismod. Vestibulum mollis viverra lacinia. Curabitur odio elit, venenatis eget congue sit amet, sagittis bibendum risus. Donec pretium id justo nec elementum. Duis interdum non ligula at imperdiet. Nunc ultricies ac arcu id aliquet. Ut vitae risus magna. Curabitur mollis placerat tortor, nec finibus mi elementum nec. Pellentesque vitae tortor elementum, porttitor magna sit amet, dapibus nisl. Nullam sed dolor id enim tempus porttitor. Curabitur eleifend condimentum nisl, id placerat purus semper sed. Nulla facilisi. Donec vehicula tempor nulla a tempor. Nulla quis rhoncus elit. Aenean sagittis auctor turpis vel pharetra. Donec est nunc, molestie sit amet ullamcorper sed, facilisis nec sapien. Mauris mauris quam, porta sed ante ut, egestas ultricies augue. Pellentesque ornare arcu ac vestibulum mattis. Sed nec malesuada turpis. Cras aliquam turpis nec justo tempus finibus. Morbi et luctus est.Curabitur eget malesuada neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed sagittis arcu. Maecenas quis orci quis lorem luctus feugiat placerat in tellus.</p> </div> <div id="our-project"> <button id="btn">View Project</button> </div>

EDIT编辑

const projectHTML = (data) => {} is an arrow function (This is an arrow: => ). const projectHTML = (data) => {}是一个箭头 function （这是一个箭头： => ）。 Most of the time arrow functions and traditional functions are interchangeable - most of the time!大多数时候箭头函数和传统函数是可以互换的——大多数时候！

The other difference is I used const instead of var .另一个区别是我使用const而不是var 。 In this simple case this also makes no difference - const is a block-scoped variable, var is not.在这个简单的情况下，这也没有什么区别 - const是块范围的变量， var不是。

data in my snippet is not a special object.我的代码片段中的数据不是特殊的 object。 I could have named it doggieDoo or anything (not reserved term, of course).我可以将它命名为doggieDoo或其他任何东西（当然不是保留词）。 this is a reserved keyword in JS. this是 JS 中的保留关键字。

So, basically they mean the same thing:所以，基本上它们的意思是一样的：

const projectHTML = (data) => {}
/*is the same as*/
var projectHTML = function(data) {}

I must emphasize though, that they do the same thing in this case!但我必须强调，在这种情况下他们做同样的事情！

You can read a lot more here:您可以在这里阅读更多内容：

Arrow functions vs traditional functions箭头函数与传统函数

Variable declarations :变量声明：

this keyword:这个关键字：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

I think you'll get much more information by looking at the linked contents, than if I started explaining:)我认为您将通过查看链接内容获得更多信息，而不是我开始解释:)

显示来自 object 的随机内容

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-10-22 12:31:48

EDIT编辑

显示来自 object 的随机内容

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-10-22 12:31:48

EDIT编辑

解决方案1
1 已采纳 2019-10-22 12:31:48