javascript - 无法同时从 awesomefont 更改文本和图标-6ren

javascript - 无法同时从 awesomefont 更改文本和图标

转载作者：行者123 更新时间：2023-11-30 12:16:09

27

4

我知道这很简单，但我不明白为什么它不起作用我只需要使用非常简单的 javascript 更改按钮的标签(里面有很棒的图标)，如下所示。如果只有一件事(图标或文本)，此代码也可以正常工作，但如果我尝试更改两者，则会导致错误

Uncaught TypeError: Cannot read property 'classList' of null

HTML

<body>
    <h1 class="text-center">Button Test Bed</h1>
    <div class="container-fluid">
        <button type="button" class="btn btn-default go" id='_edit'><i class="fa fa-pencil-square-o"></i> Edit</button>
    </div>
</body>

Javascript

var button = document.querySelector('#_edit');
button.addEventListener('click', function(event) {
    buttonChageState(event, this);
}, false);

function buttonChageState(event, target) {
    this.buttonState ;
    // console.log('event:', event);
    // console.log('target', target);

    this.icon = target.querySelector('i');
    if (this.buttonState == 0 || typeof (this.buttonState) == 'undefined') {
        console.log('this.buttonState:', this.buttonState);
        icon.classList.remove("fa-pencil-square-o");
        icon.classList.add("fa-ban");
        target.innerHTML = "Cancel";

        this.buttonState = 1;
    } else if(this.buttonState==1) {
        console.log('this.buttonState:', this.buttonState);
        icon.classList.remove("fa-ban");
        icon.classList.add("fa-pencil-square-o");
        target.innerHTML = "Edit";

        this.buttonState = 0;
    }
}

最佳答案

问题是您在本例中使用了“this”和 target.innerHTML。请改用此代码:

var icon = target.querySelector('i');

和

icon.innerHTML = "Cancel";

在这里摆弄: http://jsfiddle.net/kikill/2pLwyaxm/

关于javascript - 无法同时从 awesomefont 更改文本和图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32373888/

27

4

0

文章推荐： c# - ASP.NET MVC 路由，Html.BeginForm

文章推荐： swift - 通过 Kinvey 使用对象映射

文章推荐： swift - 如何导入特定网页上托管的特定 Swift 类/模块？

javascript - 无法同时从 awesomefont 更改文本和图标
我知道这很简单，但我不明白为什么它不起作用我只需要使用非常简单的 javascript 更改按钮的标签(里面有很棒的图标)，如下所示。如果只有一件事(图标或文本)，此代码也可以正常工作，但如果我尝试更
html - 防止文本环绕 awesomefonts 图像
我有一个图像，它是从一个 awesomefont 字符显示的，旁边有文本。我遇到的问题是我不希望文本出现在图像下方，而是在图像右侧右对齐。我试过使用单独的容器和不同类型的对齐代码，但我无法让它执行我需
html - @font-face AwesomeFont 不起作用
在提问之前，我一直在浏览搜索问答，但没有找到任何答案。对于我的元素，我必须创建一个网站，他们给了我一个文件夹“fonts”供我下载，其中包含我需要的字体，我有 2 种字体，“FontAwesome”
c++ - 如何在 OpenSuse 上的 Qt 中访问 Awesomefonts
我想在我的 Qt 应用程序中使用 fontawesome ( http://fontawesome.io/icons ) 中的一些图标，我已经将 fontawesome-webfont.ttf 文件提
java - 使用 AwesomeFont 中的自定义字体和 Java Swing 中的 unicode 字符向 JButton 添加图标？
我有一个 JButton，我想给它添加一个图标。我想使用 FontAwesome 提供的基于字体的图标，它提供了一个 TrueType 字体文件。我要添加的图标是播放按钮图标。 FontAwesome

首页

博学

6Ren·AI

商城

javascript - 无法同时从 awesomefont 更改文本和图标