Creating Progress Bar from an html table value

Question

I need help on this. I'm trying to create a simple progress bar based on a value from another TD element. Here's my code below. I want the width property value of <hr> equal to the value set on the first <TD> element.

<table>
  <tr>
    <TD id="item">70%</td>
    <td width=200 style="border: 2px solid silver;padding:none">
      <hr style="color:#c00;background-color:#c00;height:15px; border:none;
                 margin:0;" align="left" width=50%;        />
    </td>
  </tr>
</table>

Answer 1

You can do something like this

widthValue = document.getElementById("item").innerText;
document.getElementsByTagName("hr")[0].style.width = widthValue;

which will get the text contents of the <td>, and set it to the width of the <hr> element. You'd probably be better off giving the <hr> an id, so you can set its with by id rather than relying on finding it by tag name.