Problem creating labels to dynamically generated output

JavaScript
1

Hello!

Im having problem generating the labels for content created by the following function:


function setOutput(){
    if(httpObject.readyState == 4){
		var answer = httpObject.resultsponseText.split(",");
		var results = document.getElementById("resultsultadosScan1");
		var article = document.createElement("div");
		var weight = document.createElement("div");
		var price = document.createElement("div");
		article.className = "article";
		weight.className = "weight";
		price.className = "price";
        document.getElementById('outputText0').value = httpObject.innerHTML= answer[0];
		document.getElementById('outputText1').value = httpObject.innerHTML= answer[1];
		document.getElementById('outputText2').value = httpObject.innerHTML= answer[2];
		article.innerHTML = httpObject.innerHTML= answer[0];
		weight.innerHTML = httpObject.innerHTML= answer[1];
		price.innerHTML = httpObject.innerHTML= answer[2];
		results.appendChild(article);
		results.appendChild(weight);
		results.appendChild(price);
    }
 
}

A friend wrote this sample script to achieve generation of labels on my script, but I have been trying for hours with no luck, can someone take a look and tell me the correct usage of this script:


function createLabel() {
    var target = document.getElementById("target");
    var label = document.createElement("label"); 
    var text = document.createTextNode("Article"); 
    label.appendChild(text);
    target.appendChild(label); 
}

Can you help me with the correct “combination” using my script above, a “real life” example?

Thanks a lot!

2

Currently that createLabel function only creates a label with the text “Article” and appends it to an element with an id of “target”

Here’s a modification of the function that should be helpful


function createLabel(text) {
    var label = document.createElement("label"); 
    var text = document.createTextNode(text); 
    label.appendChild(text);
    return label;
}

Before much more of an answer can be given, can you give us an example of what you want the resulting HTML code to look like?

3

Thanks Paul!

You can see a sample page here, all I want is to place the labels before the text box, and style them via css, since each div has its own class.

If you want to see the page’s complete code so far here it is: muckup

Thanks again!

4

Are you meaning labels as in the actual tag <label> element that is used in forms, so that you can click on the label name and have the input selector focused in a field?
Or is it a more generic meaning of label that you want, where you just want the text on the screen next to the data?

In the mean-time, here is how the above code can be simplified so that less duplication occurs.

It makes no sense to set the httpObject.innerHTML, so that part is removed.
Now let’s reorder the lines so that each part is grouped together:

var answer = httpObject.resultsponseText.split(",");
var results = document.getElementById("resultsultadosScan1");

var article = document.createElement("div");
article.className = "article";
document.getElementById('outputText0').value = answer[0];
article.innerHTML = answer[0];
results.appendChild(article);

var weight = document.createElement("div");
weight.className = "weight";
document.getElementById('outputText1').value = answer[1];
weight.innerHTML = answer[1];
results.appendChild(weight);

var price = document.createElement("div");
price.className = "price";
document.getElementById('outputText2').value = answer[2];
price.innerHTML = answer[2];
results.appendChild(price);

Now we can put those three groups in a loop, where the class name is accessed from an array called items.


var answer = httpObject.resultsponseText.split(","),
    results = document.getElementById("resultsultadosScan1"),
    items = ['answer', 'weight', 'price'],
    i,
    item;
for (i = 0; i < items.length; i += 1) {
    item = document.createElement("div");
    item.className = items[i];
    document.getElementById('outputText' + i).value = answer[i];
    item.innerHTML = answer[i];
    results.appendChild(item);
}
5

Or is it a more generic meaning of label that you want, where you just want the text on the screen next to the data?

That’s all I need for now, the text next to the data.

Now I’ll try your suggestion.

Thanks a lot!

6

Well currently this is what the HTML code for the updated info would look like:


<div id="resultadosScan1">
    <div class="articulo">SUNGLASES</div>
    <div class="peso">2.00</div>
    <div class="precio">23.00</div>
</div>

Since the inner divs all have a border around them and are all displayed inline, you may want to contact some CSS people about an HTML structure to use for the on-screen labels that will work in with your page.

7

Paul, seems that you are a guru type of guy, I should have said at the beginning that Im just starting programming and what I have is the result of days asking around and reading and sleepless nights like tonight, here, at home, is 4:09 AM and look, trying to get this thing up and running.

The thing is that I dont even know how to start with your solution. Seems to me that it is the best solution, but Im clueless on how to implement it now so at least the page works, so far I just “copied and pasted” in my page and dont get anything, can you please elaborate a little on what exactly do I have to do?

Pleasssse!

Thanks a lot for what you’re doing!

8

Just go back to what you were doing before, until you get info about what HTML tag structure to use, and the associated CSS code for it.

There’s no point even trying to make progress with the JavaScript code until you have some idea of what you want to achieve with the HTML code.

9

Just so I know tell me if at this point is a very complicated thing just to get a name next to the text box saying what that info is? I want to know so I just go on another direction.

Should I forget about this approach of doing this?

Thanks again!

10

With your existing HTML structure, it will become messy and complicated very quickly. Messy and complicated and very bad things, because people just leave them untouched in fear of breaking something.

A better HTML structure could be to use a data list, for example:


<dl id="resultadosScan1">
    <dt>Article</dt>
    <dd>SUNGLASES</dd>
    <dt>Weight</dt>
    <dd>2.00</dd>
    <dt>Price</dt>
    <dd>23.00</dd>
</dl>

which starts off looking like this:


Article
    SUNGLASES
Weight
    2.00
Price
    23.00

But with some simple CSS, you can style it similar to what you currently have.
For a fancy example of what data lists can be used for, see the InfoGrid article ([url=“http://css-tricks.com/examples/InfoGrid/”]demo)