How to set id for an oject using javascript

Question

0.00/5 (No votes)

See more:

Hi, I have written this code and it works fine. What I want is a way to show the word edit as the innerHTML of the button instead of the id number. I assign the id to the button this is how I get the edit content to match the button clicked. How can this be accomplish. If you copy and pase the code in your code editor and save it then run it in your browser you will see what it dose. Thanks for you help.

What I have tried:

<?php include 'header.php'; ?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #output {
            background-color: #fff;
            border: 0px solid #aaa;
            margin: 10px 30px;
            padding: 10px;
        }
		
		#post{
			background-color: #fff;
			border: 1px solid #aaa;
			border-radius: 10px;
			padding: 10px;
			margin: 10px auto;
		}
		
		#form{
			display: none;
			position: fixed;
			top: 200px;
			left: 500px;
			background-color: #fff;
			border: 1px solid #ccc;
			padding: 10px;
		}

		#btnid{
			padding: 5px 20px
		}
    </style>
</head>

<body>
    <div id="output">
        <!-- Output data here -->
    </div>
    <form id="form"></form>
    <script>
        var books = [{
                id: 1,
                title: 'Hello Wrold',
                content: 'The worls as we know it'
            },
			
            {
                id: 2,
                title: 'The World around us',
                content: 'Look at the world and find your place in it'
            },
			
			{
                id: 3,
                title: 'How I see the world',
                content: 'The world is only as you see it. If you see it of positive then that will be your world'
            },
        ]
        
		var output = '';
		var btnid = '';
		for(var i = 0; i < books.length; i++){
			btnid = books[i].id;
			output += "<div id='post'>";
			output += "<h1>" + books[i].title + "</h1>";
			output += "<p>" + books[i].content + "</p><br/>";
			output += "<button id='btnid' onclick='editPost(this.innerHTML)')>" + btnid + "</button>";
			output += "</div>";
			
				
		}
		document.getElementById('output').innerHTML += output;
		 
		function editPost(val){
		  for (var i = 0; i < books.length; i++) {
			var bookid = val;
			var item = 'title';
			var content = 'content';
			
			if (books[i].id == bookid) {
				document.getElementById('form').style.display = 'block';
				document.getElementById('form').contentEditable = true;
				document.getElementById('form').focus();
				document.getElementById('form').innerHTML = books[i][item] + "<br><br>" + books[i][content];
			}
		   
		  }
		}
    </script>

</body>

</html>

Posted 29-Jun-22 10:02am

Andy R 2022

Updated 29-Jun-22 22:12pm

Chris Copeland

v3

Add a Solution

Comments

Andy R 2022 30-Jun-22 17:04pm

Hi, Chris Copeland, I have used the HTML template tag to output the data from the array. Now, it shows the data when I click the button I have created for the load more, but I want it to only display two items at a time. Here is the javascript code I have used for this.

function showTem(){
var temp = document.getElementsByTagName('template')[0];
var count = 2;
for(var i = 0; i < temp.length; i++){
var clone = temp.content.cloneNode(true);
document.body.appendChild(clone);
count += 2;
}
}

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Chris Copeland · Answer 1 · 2022-06-29T22:12:00

Solution 2

When you build your button here:

<button id='btnid' onclick='editPost(this.innerHTML)'>" + btnid + "</button>"

You already have access to the button ID via the btnid variable. So, why not just inject that directly into the onclick method like so:

<button id='btnid' onclick='editPost(" + btnid + ")'>" + btnid + "</button>"

Then you can assign whatever value you want to the button's inner HTML. An alternative way is to use data-* attributes which are a good way to store data on elements:

// HTML
<button id="btnid" onclick="editPost(this)" data-id='" + btnid + "'>" + btnid + "</button>"

// Javascript
function editPost(button) {
  const id = button.getAttribute('data-id');

  ...
}

Posted 29-Jun-22 22:12pm

Chris Copeland

Updated 29-Jun-22 22:13pm

v2

Comments

Andy R 2022 30-Jun-22 7:17am

Hi, thanks for your response. I will try some of those alternatives in my code as well. It is good knowledge. I have used a label tag and wrap the button in it and it works perfect. The solution given here is also very good. I will use it and see what result I get. Thanks for your response Chris Copeland

Andy R 2022 30-Jun-22 8:34am

Hi Chris, I have tested your solution and it works fine as well. The data-id attribute works just as the label method. Thanks. Keep those ideas coming. Do you have a javascript solution for a load more post issue rather than the jquery. I will post post the php code and you can look at it. While the Jquery works I will just prefer to use Javascript Ajax instead.

Andy R 2022 30-Jun-22 11:09am

Hi Chris Copeland, using the same example codes that I have posted in the question. How do you create a load more from the display using Javascript. For example, instead of showing all the object from the array at one time, display two and the then click a button name load more and display another two and so on. Thanks for any solution you can give.

Chris Copeland 4-Jul-22 5:02am

This SO answer has a good example of how to achieve that. You need to maintain a variable to store the current "page", and a variable to store how many items should be displayed per page. You'd need to add a "show more" button and when that's clicked, increment the current "page" and then select a range of values from the array based on the "page" and the count. Ie:

let page = 0;
const count = 2;

// On first load
const items = array.slice((page * count), (page * count) + count);

// On second load
page++;
const items = array.slice((page * count), (page * count) * count);

Andy R 2022 · Answer 2 · 2022-06-29T12:29:00

I have posted a question previously but I have came up with a very simple solution for the issue. I nested the button tag in a label tag and then use css to hide the button id. This work perfect. But still post your solution I will like to to see what other methods can be used to solve the issue.