Wow, you are relatively new to this yes?
The short answer is that you didn't escape your quotes:
Code:
echo( "<a id="my_link" href="javascript:editLink()">Click Me</a> ");
should be:
Code:
echo( "<a id=\"my_link\" href=\"javascript:editLink()\">Click Me</a> ");
Also, you should look into configuring your php.ini to display errors during development (turn it off on a production server) so that you would get an error instead of a blank page. In this case, it would have been a parse error.
Next, just some friendly advice, work on writing cleaner code. Start by running the HTML through a validator (Google search "HTML Validator") and used the "cleaned up" version. Especially when using DOM and Javascript functions as we are in this case.
Next, rather than putting all that code into echo functions, why not just use a PHP block where needed. As an example, both of these work the same:
Code:
<?php
$hello = "Hello World";
echo "<p>$hello</p>";
?>
<?php $hello = "Hello World" ?>
<p><? echo $hello ?></p>
The goal is to keep the PHP and output as separate as possible so it's easy to read and maintain. A lot of professionals use templates for this reason, but if you're new, you should start by trying to keep the PHP that process things in one part of the page, such as the top, and regular html on the bottom with PHP variables placed where needed.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PHP, Javascript, and HTML</title>
<script type="text/javascript">
function editLink()
{
var myLink = document.getElementById('my_link');
var myInput = document.getElementById('my_input');
myInput.value = myLink.innerHTML;
myLink.style.display = 'none';
myInput.style.display = 'inline';
}
function doneEdit()
{
var myLink = document.getElementById('my_link');
var myInput = document.getElementById('my_input');
myLink.innerHTML = myInput.value;
myLink.style.display = 'inline';
myInput.style.display = 'none';
}
</script>
</head>
<body>
<?php
// here is a php block
echo "This is a test of PHP, Javascript, and HTML";
?>
<br/>
<p><?= "I could have just used a PHP echo short cut" ?></p>
<br/>
<a id="my_link"
href="javascript:editLink()">Click Me</a>
<input type="text"
style="display: none;"
id="my_input"
onblur="doneEdit()"/>
</body>
</html>
