Can'；我不能让任何Javascript文件在blazor中正常工作

对blazor来说比较新

我一直在使用MVC和webforms，但对blazor和.NETCore进行了深入研究

从开始到结束，这是多么痛苦啊。。。不管怎样，我的问题

I am trying to follow this codepen, typewriter text `https://codepen.io/hckkiu/pen/KKzgEMr`

非常容易在任何地方实现，但blazor。。。因此，我已经正确加载了CSS和javascript文件，但输出从未出现过

谁能告诉我为什么它没有加载/blazor/c#

javascript正在闪烁，但没有文本延续

<div class='containers'>
    <div class="bodys">
        <p class='typewriter'>
            I'm a
            <span class='typewriter-text' data-text='[ "photographer. ", "designer. ", "developer. " ]'></span>
        </p>
    </div>
</div>

---

在呈现组件/页面后，您必须调用javascript，

$（document）。在这种情况下，ready

没有帮助，因为组件可能在页面加载后呈现

请参见下面的示例，以调用javascript，然后执行您想要的功能：

在您的组件中：

@injectijsruntime；
//或
[Inject]受保护的IJSRuntime运行时{get；set；}
AfterRenderAsync（bool firstRender）上受保护的重写异步任务
{
if（firstRender）
{
等待JSRuntime.InvokeVoidAsync（“startTyping”）；
}
}

Javascript文件：

window.startTyping=（）=>{
键入（0，$（'.typewriter text'）。数据（'text'））；
//其他js代码在这里
}

---

请参见此处以获取参考：

很高兴看到您正在试用Blazor

第一课应该是——不要试图用JavaScript做所有事情。把你想做的事情翻译成Blazor。使用JS库和组件是一个高级主题—从普通的C#Blazor开始—是一个很好的资源

这是一个工作回复：

这方面的代码——Blazor中不需要JavaScript

注意：在现实世界中，您将使此实现IDisposable，并使用取消令牌取消长时间运行的任务

我是一个作家
@打字机文本

@code{
string[]jobs={“摄影师”，“设计师”，“开发者]；
字符串typewriterText；
任务工作者；
受保护的覆盖无效OnInitialized（）
{
工人=打字机（）；
}
异步任务打字机（）
{
var指数=0；
while（true）
{
var textIndex=1；
while（textIndex0）
{
typewriterText=jobs[index]。子字符串（0，textIndex）；
文本索引--；
StateHasChanged（）；
等待任务。延迟（150）；
};
索引++；
if（index==jobs.Length）
{ 
指数=0；
}
}
}
}

感谢您的评论@Umair我尝试了您的版本，但javascript中出现错误。你能告诉我我的javascript文件应该是什么样子吗。可能是我在输入窗口后做错了。开始输入。。。我还收到了互操作错误，说窗口没有定义谢谢你，马古先生。我从没想过用代码来做。。。谢谢你的帮助！！

$(document).ready(function () {

    typing(0, $('.typewriter-text').data('text'));

    function typing(index, text) {

        var textIndex = 1;

        var tmp = setInterval(function () {
            if (textIndex < text[index].length + 1) {
                $('.typewriter-text').text(text[index].substr(0, textIndex));
                textIndex++;
            } else {
                setTimeout(function () { deleting(index, text) }, 2000);
                clearInterval(tmp);
            }

        }, 150);

    }

    function deleting(index, text) {

        var textIndex = text[index].length;

        var tmp = setInterval(function () {

            if (textIndex + 1 > 0) {
                $('.typewriter-text').text(text[index].substr(0, textIndex));
                textIndex--;
            } else {
                index++;
                if (index == text.length) { index = 0; }
                typing(index, text);
                clearInterval(tmp);
            }

        }, 150)

    }

});

bodys {
    width: 100%;
    height: 100%;
    background-color: #3a3a3a;
}

.containers {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
}

.typewriter {
    font-family: sans-serif;
    color: black;
    padding-left: 30px;
    display: block;
}

.typewriter-text {
    padding-right: 10px;
    color: red;
    border-right: solid #ffe509 7px;
    text-transform: uppercase;
    animation: cursor 1s ease-in-out infinite;
    font-weight: bold;
}

@keyframes cursor {
    from {
        border-color: #ffe509;
    }

    to {
        border-color: transparent;
    }
}

@media (max-width: 767.98px) {
    .typewriter {
        font-size: 35px;
    }
}

@media (min-width: 768px) {
    .typewriter {
        font-size: 60px;
    }
}