分配Javascript变量以更正HTML表的文本值（ <td> 标签）

Question

I have a PHP file that outputs an HTML table. The table is dynamically created from a list of music videos in a folder. It then outputs my table with the data.

I need to assign a Javascript variable for the td where I am typing to a Javascript function. I window.alert to test the variable but it is blank. I think it is because it doesn't uniquely identify the record I am busy with

How can I uniquely identify the text?

I have tried:

var y = document.getElementById("about");
var y = document.getElementById("about").value;
var y = document.getElementById("about").innerHTML;
var y = document.getElementById("about").innerText;

It doesn't seem to work, here is my table:

$output .= '<div id="videos-div" class="videos">'."\n";
$output .= '  <table class="stats" cellspacing="5">'."\n";
$output .= ' <tr>'."\n";
$output .= '   <th class="hed" colspan="1">VideoName</td>'."\n";
$output .= '   <th class="hed" colspan="1">Date</td>'."\n";
$output .= '   <th class="hed" colspan="1">Description</td>'."\n";
$output .= ' </tr>'."\n";

Now for each music video I:

$output .= '<tr id="actiontable'.$record['video'].'">'."\n";
$output .= ' <td>'.$videoname.'</td>'."\n";
$output .= ' <td>'.$date.' min</td>'."\n";
$output .= ' <td id="about" ><input type="text" 
oninput="myFunction()" 
placeholder="'.$metadata2.'" /></td>'."\n";

My function:

$output .= '
<script type="text/javascript">
function myFunction ()
{
var y = document.getElementById("about");
window.alert(y);
}
</script>';

When I hardcode the: window.alert it does work

What I need to do is take the text from the: Description and then pass that to another Javascript function

I don't get any errors, just a blank variable . I think it is because it doesn't know it is for the td where I am typing

Answer 1

在两个位置进行更改，将id应用于输入类型，并在通过ID获得之后第二个放置'.value'

1. <input id="about" type="text" oninput="myFunction()" placeholder="'.$metadata2.'" /></td>

2. var y = document.getElementById("about").value;

Answer 2

First you have to be sure that your HTML as been rendered, so go on your console and look that <td id="about"> is here.

If yes your function with the code under should display something like [object HTMLTdElement] .

var y = document.getElementById("about");
alert(y); 

Second When you try all of this:

var y = document.getElementById("about");
var y = document.getElementById("about").value;
var y = document.getElementById("about").innerHTML;
var y = document.getElementById("about").innerText;

It's done on the <td> tag, who have the id , but you want to do it into the input child. Do it like that: var y = document.querySelector("#about input").value

And it should works !

Answer 3

Edit: I just realized a different problem. id s have to be unique, but you are adding another about with every new <tr> . Consider using a class-name about and a data-attribute with an id for each entry. In the following example I have three rows with buttons for demonstration purposes

 function getAboutForId(id) { let about = document.querySelector('.about[data-id="'+id+'"] input').value; alert(about); } 

 <div id="videos-div" class="videos"> <table class="stats" cellspacing="5"> <tr> <th class="hed" colspan="1">VideoName</td> <th class="hed" colspan="1">Date</td> <th class="hed" colspan="1">Description</td> </tr> <tr> <td>$videoname</td> <td>$date min</td> <td class="about" data-id="1"><input type="text" placeholder="$metadata2" /></td><td><input type="button" value="alert" onclick="getAboutForId(1)"></td> </tr><tr> <td>$videoname</td> <td>$date min</td> <td class="about" data-id="2"><input type="text" placeholder="$metadata2" /></td><td><input type="button" value="alert" onclick="getAboutForId(2)"></td> </tr><tr> <td>$videoname</td> <td>$date min</td> <td class="about" data-id="3"><input type="text" placeholder="$metadata2" /></td><td><input type="button" value="alert" onclick="getAboutForId(3)"></td> </tr> 

You can then get the input-value from the nested input of the td with this CSS-query: .about[data-id="1"] input . It's best to use the value attribute with form-elements.