HTML tags in conditionals: can they be closed outside of the conditionals?

#1

Hi there,

The following code, that sits inside a template, seems to work perfectly:

<table>
	<tr>
		<th align="left">Modifier value:</th>
		<td>
		<$let modvalue={{!!modifier-value}}>''
			<% if [<modvalue>compare::gteq[0]] %>
				+
			<% else %>
			<% endif %><<modvalue>>%''
		</$let>
		<% if [<currentTiddler>has[modifier-per-level-value]] %>
			<$let modvaluelvl={{!!modifier-per-level-value}}>
				, ''
				<% if [<modvaluelvl>compare::gteq[0]] %>
					+
				<% else %>
				<% endif %>
				<<modvaluelvl>>%''/level
			</$let>
		<% endif %>
		</td>
	</tr>
	<%if [<currentTiddler>has[to-advantages]] %>
		<tr><th align="left">Only applicable to</th><td><$list filter="[{!!to-advantages}split[, ]]" variable="toadv" join=", "><$link to=<<toadv>>/></$list></td></tr>
	<% endif %>
</table>

As it renders like this in my Tiddler (expected behaviour):

Positive value in field modifier-value:
image

Negative value in field modifier-value:
image

Positive value in field modifier-per-level-value:
image

Negative value in field modifier-per-level-value:
image

However, when I add styling elements like below:

<table>
<tr>
<th align="left">Modifier value:</th>
<td>
<$let modvalue={{!!modifier-value}}>''
	<% if [<modvalue>compare::gteq[0]] %>
		<div class='mark' title='This increases the cost'><span class='label clean negative'>+
	<% else %><div class='mark' title='This decreases the cost'><span class='label clean positive'>
	<% endif %><<modvalue>>%''</span></div>
</$let>
<% if [<currentTiddler>has[modifier-per-level-value]] %>
	<$let modvaluelvl={{!!modifier-per-level-value}}>
		, ''
		<% if [<modvaluelvl>compare::gteq[0]] %>
			<div class='mark' title='This increases the cost'><span class='label clean negative'>+
		<% else %><div class='mark' title='This decreases the cost'><span class='label clean positive'>
		<% endif %>
		<<modvaluelvl>>%''/level</span></div>
	</$let>
<% endif %>
</td>
</tr>
<%if [<currentTiddler>has[to-advantages]] %><tr><th align="left">Only applicable to</th><td><$list filter="[{!!to-advantages}split[, ]]" variable="toadv" join=", "><$link to=<<toadv>>/></$list></td></tr><% endif %>
</table>

It breaks down and renders this:
image

I assumed I had a syntax issue somewhere, and looked for it for ages to no avail. Maybe I missed it and I will feel like an idiot (again) very soon, but I started wondering if something else was at play, preventing me from using this approach of opening HTML tags inside conditionals and closing them outside of them.

Can anyone tell me whether I am indeed an idiot, or if there’s something else at play? :slight_smile:

#2

I think that’s exactly the issue. Jeremey responded with a very useful explanation when I asked a similar question. It wasn’t about conditionals, but about <$list> widgets, but I’m guessing that much the same thing applies.

1 Like
#3

@jeremyruston’s makes, indeed, total sense. Thanks @Scott_Sauyet !

#4

You may use the HTML element <strong>your content</strong> instead of '' your content ''

#5

It’s not possible to start the <span class ...> then <% endif %> then </span>. You need to move the start <span> outside of endif – and </strong> outside of </div>

So nesting needs to be right.

#6

I still find it weird that divs and spans formatting break it, but not table formatting.

#7

Your TD and /TD do cover the whole content. So that’s fine. You can not do things like this

<div>
<span>
</div>
</span>

That’s basically what you did. That’s not a TW thing that’s an HTML thing.

See: Basic HTML syntax - Learn web development | MDN

1 Like