如何在Laravel Blade中正确实现这个脚本?

huangapple go评论96阅读模式
英文:

How do I implement this script correctly in Laravel Blade?

问题

I am trying to make a registration form where different options become available depending on the radio button selected. However, when I try what I can find on the internet, I get an error. For the HTML part, I use:

  1. <input type="radio" id="Swimmer" name="userType" value="swimmer" onclick="swimmerCheck()">
  2. <label for="Swimmer">Swimmer</label><br>
  3. <input type="radio" id="Coach" name="userType" value="coach">
  4. <label for="Coach">Coach</label><br>
  5. <input type="radio" id="Admin" name="userType" value="admin">
  6. <label for="Admin">Admin</label><br>
  7. <div id="fedNumber" style="display: none;">
  8. <label for="federation_number">{{ __('Fed Numb') }}</label>
  9. <input id="federation_number" class="block mt-1 w-full" type="text" name="federation_number" :value="old('federation_number')" autofocus autocomplete="name" />
  10. </div>

And at the bottom, for the script, I use:

  1. @push('script')
  2. <script>
  3. console.log('hello');
  4. function swimmerCheck() {
  5. if (document.getElementById('Swimmer').checked) {
  6. console.log('Checked');
  7. } else {
  8. console.log('Not checked');
  9. }
  10. }
  11. </script>
  12. @endpush

But when I press the button and look at my console, it gives an error regarding the onclick, saying it can't read the properties.

I have made sure that the @stack('script') is also in the external style, and the 'Hello' console log does work, so the script does get through.

英文:

I am trying to make a registration form where different options become available depending on the radio button selected. However when i try what i can find on the internet i get an error. For the HTML part i use:

  1. &lt;input type=&quot;radio&quot; id=&quot;Swimmer&quot; name=&quot;userType&quot; value=&quot;swimmer&quot; onclick=&quot;swimmerCheck()&quot;&gt;
  2. &lt;label for=&quot;Swimmer&quot;&gt;Swimmer&lt;/label&gt;&lt;br&gt;
  3. &lt;input type=&quot;radio&quot; id=&quot;Coach&quot; name=&quot;userType&quot; value=&quot;coach&quot;&gt;
  4. &lt;label for=&quot;Coach&quot;&gt;Coach&lt;/label&gt;&lt;br&gt;
  5. &lt;input type=&quot;radio&quot; id=&quot;Admin&quot; name=&quot;userType&quot; value=&quot;admin&quot;&gt;
  6. &lt;label for=&quot;Admin&quot;&gt;Admin&lt;/label&gt;&lt;br&gt;
  7. &lt;div id=&quot;fedNumber&quot; style=&quot;display: none;&quot;&gt;
  8. &lt;x-label for=&quot;federation_number&quot; value=&quot;{{ __(&#39;Fed Numb&#39;) }}&quot; /&gt;
  9. &lt;x-input id=&quot;federation_number&quot; class=&quot;block mt-1 w-full&quot; type=&quot;text&quot; name=&quot;federation_number&quot; :value=&quot;old(&#39;federation_number&#39;)&quot; autofocus autocomplete=&quot;name&quot; /&gt;
  10. &lt;/div&gt;

And at the bottom, for the script i use:

  1. @push(&#39;script&#39;)
  2. &lt;script&gt;
  3. console.log(&#39;hello&#39;);
  4. function swimmerCheck() {
  5. if (document.getElementById(&#39;Swimmer&#39;).@checked(true)) {
  6. console.log(&#39;Checked&#39;);
  7. }
  8. else console.log(&#39;Not checked&#39;);
  9. }
  10. &lt;/script&gt;
  11. @endpush

But when i press the button and look at my console, it gives an error regarding the onclick, saying it can't read the properties.

I have made sure that the @Stack('script') is also in the external style and the 'Hello' console log does work, so the script does really get through.

答案1

得分: 1

在您的父Blade文件上添加@stack(&#39;script&#39;)

英文:

Add @stack(&#39;script&#39;) on your parent blade file.

答案2

得分: 1

Laravel 显然不喜欢我的自定义 Blade 文件中的代码,但当我将它放在原始样式页面头部的脚本中时,它确实起作用。因此,不使用 @Stack 和 @Push。

英文:

So apperently Larvel didn't like my code in my custom blade file but it did work when i put it in a script in the head of the original styling page. So no use of @Stack and @Push.

huangapple
  • 本文由 发表于 2023年5月7日 04:42:32
  • 转载请务必保留本文链接:https://go.coder-hub.com/76191044.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定