Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Harlowe and Javascript

I´m trying to change the background image of a <div> by moving to another passage.
I want to use javaScript to do so, mostly because I´m using this as an exercise to learn html, css and javascript.

The code I got is the following:
document.getElementById('con_area_id').style.backgroundImage="LocArray[0].bg";
the div id and path is all correct but I get this error: "Cannot read property 'style' of null"

So I assume .style isnt the right way to get that image in twine, I cant find anything regarding that though.


Also I would like to have the script in an external file but from what I read on here that is not possible?
I saw some solutions with jquery, but I just want to use my own locally stored scripts.

Any ideas?



Thanks in advance!

Comments

  • edited July 2016
    Your example is missing a couple of things:

    1. An example of the con_area_id div element's , so I will assume it is something like the following:
    <div id="con_area_id"></div>
    
    2. What the value of your LocArray[0].bg variable is, so I will use:
    "media/desert.jpg"
    
    3. What CSS you are using to size your div element, I will use:
    #con_area_id {
    	width: 400px;
    	height: 400px;
    }
    

    If all you want to do is have conditional background images then you could use the technique described in the Basic Harlowe Passage Tag Based Styling thread to do it.
    Assuming one of your tags isdesert then the related CSS would look something like the following:
    html.desert tw-story #con_area_id {
    	background-image: url('media/desert.jpg');
    }
    

    If you really want to use Javascript to solve this problem then you could add something like the following to your passage, it first tries to find the element and if successful it then assigns a image URL to the element's backgroundImage property.

    note: the following code needs to appear later in the passage than the con_area_id div element declaration.
    <script>
    	var element = document.getElementById('con_area_id');
    	if (element) {
    		element.style.backgroundImage = "url('" + LocArray[0].bg + "')";
    	}
    </script>
    
  • edited July 2016
    Hey greyelf,

    Sorry about that, I´m pretty sure the other things are correct though that´s why I didnt mention them.
    Im using your auto tags and I have another twine solution already that is based on variables but I want to use Javascript so I can keep learning it and use it for other things.

    After reading your response I ran into another much more serious problem with my approach to the game I want to make.
    Your solution most likely solves my background problem though, so thank you for that.
    I guess I have to redo a lot of things now. :/

    I wanted to have the page load the layout only once and then dynamically insert everything based on which passage is active and what youre doing.
    To do that I wanted to use passages and give them game related infos and just insert them into the "#content" div. And of course change the appearance accordingly which was the purpose of this topic.
    I realized that I have no idea if I can insert stuff into the div though without ending up having the whole game inside javascript variables/arrays and not as planned in passages.
    I thought I could have an array that stores all relevant data for a location and just grab the location array infos and be done.

    Well, thank you once again for responding so quickly though.
Sign In or Register to comment.