I have question in my development, i want make a js about use click to show information on div, but when i click it can’t run. next is my code:
::建设
<<set $bulid_non to ["马拒"]>>
<<set $bulid_over to []>>
<div id="buliding">
<<= window.BulidShow()>>
</div>
window.BulidShow=function(){
for(let key in State.variables.$bulid_non){
Tack(key);
}
}
function Tack(Key){
var Window=document.getElementById("explor");
var Para = document.createElement("p");
var node = document.createTextNode("你目前可以建造:"+Key);
var button = document.createElement("button");
var node2 = document.createTextNode("建造")
para.appendChild(node);
button.appendChild(node2)
var element = document.getElementById("explor");
element.appendChild(para);
element.appendChild(button)
window.location.reload("buliding");
}
wall, I’m a novice of js, so I can make some base mistake.
I haven’t tested this myself, so I don’t know for sure if this is really the issue, but it might be that you’re missing a <<done>> macro? See the link here.
If I remember everything correctly, in Sugarcube, any Javascript that manipulates elements of the current passage should be inside a <<done>> macro. Otherwise the game will try to execute the Javascript before the actual passage is loaded, or something like that.
I can’t point to a specific place, but some suggestions:
Where is the explor element declared? I’d check the browser’s console (at developer tools) to check if it’s being picked up correcly by the Tack() function.
Note that <<= >> is an alias for print. Yours won’t print anything, as BulidShow() function has no return statement.
SugarCube has a number of macros that can help you with DOM manipulation and reusable page elements. This use case might be implemented using native Twine syntax (check <<append>>, <<replace>> and <<widget>>).
hmmm, i want use it to practice the javascript, but maybe I don’t understand js in sugercube, maybe I need other macro or return Tack()? and I try to fit my code, it like this:
window.BulidShow=function(){
for(let key in State.variables.$bulid_non){
return Tack(key);
}
}
function Tack(Key){
var Window=document.getElementById("buliding");
var Para = document.createElement("p");
var node = document.createTextNode("你目前可以建造:"+Key);
var button = document.createElement("button");
var node2 = document.createTextNode("建造")
para.appendChild(node);
button.appendChild(node2)
var element = document.getElementById("buliding");
element.appendChild(para);
element.appendChild(button)
window.location.reload("buliding");
}
Sugarcube 2.30.0 is an old version. The <<done>> macro hadn’t been introduced yet. I’d recommend upgrading, but if you really don’t want to you can use <<timed 0s>> instead of <<done>>.
it may be an idea to change story format to snowman if you’re not in too deep with sugarcube and want to use more JS.
Sugarcube, in my experience, is a little difficult to mix JS with sugarcubes macros.
I’ve been wrestling for too long already trying to make a character sheet builder and made the swap (i just cant wrap my head around sugarcube’s macros.).
It should be State.variables.bulid_non in BulidShow(). In State.variables or State.temporary the variable names are used without the sigils—i.e., without the $ or _.
Also, you may want Engine.play("buliding") instead of window.location.reload("buliding") in Tack().
If you’re not, then I don’t know what your problem is, but it’s pretty easy to mix JavaScript and macros. You generally don’t do so, you either use macros or JavaScript normally. Though that depends on what you’re doing, obviously.