I am trying to put a function between if else block. below is what i imagine it would be.:
<script>
let condition=false
function function_here(event){
if(event){
condition = true;
}else if(!event){
condition = false;
}else{
condition = !condition;
}
</script>
{#each post as posts}
{#if posts.object1==="match" }
<p>HTML HERE</p>
{function_here(true)}
{/if}
{/each}
{#if condition}
<button>type1</button>
{:else}
<button>type2</button>
{/if}
if only during looping post result, if found posts.object1 match, i need to change the status of variable "condition"
however , this example return result "undefined".
How do i put function in between if block in svelte?
I am trying to put a function between if else block. below is what i imagine it would be.:
<script>
let condition=false
function function_here(event){
if(event){
condition = true;
}else if(!event){
condition = false;
}else{
condition = !condition;
}
</script>
{#each post as posts}
{#if posts.object1==="match" }
<p>HTML HERE</p>
{function_here(true)}
{/if}
{/each}
{#if condition}
<button>type1</button>
{:else}
<button>type2</button>
{/if}
if only during looping post result, if found posts.object1 match, i need to change the status of variable "condition"
however , this example return result "undefined".
How do i put function in between if block in svelte?
Share Improve this question edited Jun 28, 2021 at 15:47 Krishna Satwaji Khandagale 2,26018 silver badges25 bronze badges asked Sep 14, 2020 at 5:18 dwerty_weirddwerty_weird 1834 silver badges17 bronze badges 4-
1
Can you provide a better example? You are passing
trueto it, so it will always docondition = true. I fail to see the purpose of that. And you likely seeundefinedbecause the function doesn’treturnanything. – Felix Kling Commented Sep 14, 2020 at 5:30 -
1
Maybe what you really want is to pute the value upfront with
condition = posts.some(post => post.object1 === 'match')– Felix Kling Commented Sep 14, 2020 at 5:34 -
its one of the first things you should know about javascript. if an function does not return anything, it will return
undefined. your function doesnt return anything – Ilijanovic Commented Sep 14, 2020 at 5:35 - hi felix. i need to revert condition back to false, after every post loop. i need to use toggle like function in some other part of code, but in this part, i need to be able to pass true when post.object1 is match. that why the function look like that. – dwerty_weird Commented Sep 20, 2020 at 3:08
4 Answers
Reset to default 6Calling functions inside the template like that is considered bad practice in Svelte, that code belongs in the script part of the ponent. The best approach this problem is a reactive variable so that it also changes if posts changes:
$: condition = posts.... // something based on posts
What condition actually works out to be is up to you though, the code you gave in your answer seems very simplified from the actual code.
I understand the other answers give a suggestion to use best practices. However, to answer the general question of running or calling JS code in Svelte within the HTML portions of it can be done as follows.
<script>
...
</script>
<!-- HTML part -->
{functionCall() || ""} <-- This avoids 'undefined' showing up in your markup!
Or alternatively,
<!-- HTML part -->
{"" ?? functionCall()} <-- This avoids 'undefined' showing up in your markup!
Better yet, use the void operator. Using the void and the Nullish operator ensures that, even if your function returns a value, nothing is ever displayed in your markup.
<!-- HTML part -->
{void functionCall() ?? ""} <-- This avoids any sort of value from showing up in your markup!
You are trying to approach this in a way that JSX would like. Why not abstract that logic into plain JS inside the <script>?
<script>
let condition = false
function function_here(event) {
if (event) {
condition = true;
} else if (!event) {
condition = false;
} else {
condition = !condition;
}
}
for (post in posts) {
if (post.object1 === 'match') {
function_here(true)
}
}
</script>
{#each post as posts}
{#if post.object1 === "match" }
<p>HTML HERE</p>
{/if}
{/each}
{#if condition}
<button>type1</button>
{:else}
<button>type2</button>
{/if}