奇怪的DOM树JavaScript问题

Question

I am having an issue with this site -

http://thestamp.umd.edu/canvastest/test.html

I'm trying to build a simple HTML emailer with JavaScript to render and generate HTML which will then be sent to a page, etc.

However, when you create three paragraphs (箱を作る) and then try to move the third one up with the onclick being swapup('render2'); it just moves it to the top.

But the odd thing is when you paste swapup('render2'); in the console, it works just fine. Why should the onclick behaviour be different when I'm not referencing 'this' in any capacity?

Answer 1

Your problem is that you are calling swapup twice. Take a look at the HTML

<span class="floatbutton" onclick="swapup('render0');">
    <input onclick="swapup('render2');" value="上" type="button">
    <input onclick="swapdown();" value="下" type="button">
</span>

both span and input are calling swapup. It looks like swapup is being dynamically assigned at some point to the span, which may be causing your problem... I'll have to dig a little more to figure it out though.

EDIT:

I see now. In your swapup function you are calling

elm.childNodes[0].setAttribute('onclick', 'swapup(\'' + previous.id + '\');');

I'm not sure if you intended that or not... can you clarify?

EDIT 2:

I think you need to change

elm.childNodes[0].setAttribute('onclick', 'swapup(\'' + previous.id + '\');');
previous.childNodes[0].setAttribute('onclick', 'swapup(\'' + temp + '\');');

in boxes.js lines 23-24 to

elm.getElementsByTagName("input")[0].setAttribute('onclick', 'swapup(\'' + previous.id + '\');');
previous.getElementsByTagName("input")[0].setAttribute('onclick', 'swapup(\'' + temp + '\');');