I have created the code using the this keyword. It works fine, if you click on the object(span) it will show the relevant data in the edit box. However, the whole span is clickable and I only want to make the edit button clickable and accomplish the same task. How can I do this? I have tried binding the HTML label to the span using the for attribute, but this did not work. If you copy the code and run in your browser, you will see that it works when you click anywhere on the span container. Is it possible to transfer this functionality to a button or label?
What I have tried:
<pre><?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>
</head>
<body>
<div id='form'></div>
<div id="output"></div>
<script>
var post, showPost, title, content, output, i;
function showPost() {
showPost = '[{"title": "Hello World", "content": "What a beautiful day"}, {"title":"How are you", "content":"The beauty oflife"}, {"title":"The big bang", "content":"Wowww!!!!!"}, {"title":"Welcome", "content":"To my world"}]';
post = JSON.parse(showPost);
output = '';
for (i = 0; i < post.length; i++) {
title = post[i].title + "<br>";
content = post[i].content + "<br>";
output += "<div id='contents' style='border:1px solid #333;margin:10px;padding:10px' >";
output += "<label for='send'>" + "edit" + "</label>";
output += "<span id='send' onclick='showData(this)'>";
output += "<h1 id='h1-heading'>" + title + "</h1>";
output += "<p id='post-par'>" + content + "</p>";
output += "</span>";
output += "</div>";
document.getElementById('output').innerHTML = output;
console.log(title + "<br>" + content);
}
}
showPost();
function showData(val) {
//alert();
var contents = document.getElementById('contents').value = val.innerHTML;
document.getElementById('form').innerHTML = contents;
}
</script>
</body>
Submit an article or tip