Calling a function onclick in Svelte答案

【问题标题】：Calling a function onclick in SvelteCalling a function onclick in Svelte
【发布时间】：2022-12-26 15:41:58
【问题描述】：

I began using svelte for a recent project, and although I like the workflow of the framework so far, I've yet to get a single function to work successfully.

Currently, I'm trying to change the innerHTML of a series of objects using functions.

Below is my code:

<head>
  <script>
    export let question1() {
      document.getElementByClass(questionBox).innerHTML = "True or False?";
      document.getElementById(ans_1).innerHTML = "True";
      document.getElementById(ans_2).innerHTML = "False";}
  </script>
</head>
<body>
  <div class="container">
    <button on:click={question1} class="startButton">Start Game</button>
      <div class="box"><span id="questionBox">...</span></div>
        </div>
        <div class="option-container">
          <button class="option" id="ans_1">option1</button>
          <button class="option" id="ans_2">option2</button>
        </div>
</body>

There is an error marked beneath my function when I call it on:click in the button, and that error reads as follows:

'question1' is not defined. Consider adding a <script> block with 'export let question1' to declare a propsvelte(missing-declaration)

I am quite new to svelte and it's entirely possible I misunderstood something structurally within my code, but I've checked all over and can't seem to find anything that quite addresses my problem.

Any help would be quite appreciated. Perhaps I just need some new eyes on this.

Thank you.

【问题讨论】：

Where does the <head> come from? Normally a *.svelte file has top-level <script> block, a <style> block, and other DOM elements to be rendered when the component mounts. If you put the <script> inside <head>, it's no longer a top-level script block, and it'll be treated as normal DOM elements to be rendered.

标签： javascript svelte

【解决方案1】：

Here's the list of things you might have gotten wrong.

Function declaration
This is valid:
```
function question1() {
 //dosomething
}
```
This is valid too (arrow function):
```
let question1 = () => {
 //dosomething
}
```
But this is not a correct way:
```
let question1() {
 //dosomething
}
```
1. getElementByClass is not a correct method. You probably meant getElementsByClassName.
  
  document.getElementByClassName("questionBox").innerHTML = "something"
Note that if you have more than one element with that class name, only the first item will be affected. Easiest way to get a single element is to use:
```
//by class name
document.querySelector(".classname")

//by id
document.querySelector("#id")

//by element type
document.querySelector("div")
```
1. You dont need to add <head> tag in your code. Each svelte file can have a <script> and <style> element in the component at top level.
2. You are trying to change text in elements in a Vanilla JS way. You should probably populate the DOM using data so that you are taking advantage of Svelte's amazing reactivity. Look at thisREPLto see a replication of what you are trying to do in a more Svelty way. Basically, use data to dynamically render the DOM elements. That way, you will never directly manipulate the DOM Elements. Just change your data and Svelte takes care of changing the DOM. https://svelte.dev/repl/8316ae63d83b443aaef5aa7b29c36dc1?version=3.53.1
3. Use betternames for your functions. question1 as a function name is not descriptive of what you are doing inside.
4. If you still want to modify the DOM elements directly, you can bind them to variables like so and change text like so: https://svelte.dev/tutorial/bind-this

【讨论】：

Thank you! These tips helped alot, expecially the repl! I think I understand quite a bit better now.