Question

我使用Squarespace，并在我的网站上有一个按钮，我想要更改文本。

我无法访问html，但我可以使用“button”元素执行“javascript ::”样式。 Link to Image

我尝试了this.innerhtml，但它没有用。

我也试过了：

<script>
function changeText(boxID)
{
 document.getElementById($(boxID).attr("id")).innerHTML = 'stuff';
}
</script>

并致电javascript::changeText()，但这不起作用。

它是一个方形空间网站，因此我无法更改ID名称，每次我在网站上更改任何内容时它们都会更改。按钮的类名将选择所有按钮，因此也不起作用。

更新：这在小链接中的按钮上：javascript:changeText(this);

这在代码注入面板中：

<script>
function changeText(box)
{
    var boxID = box.id;
    alert(box.id);
    console.log('element id = ' + id);
    document.getElementById(boxID).innerHTML = 'stuff';
}
</script>

我收到错误(index):80 Uncaught TypeError: Cannot set property 'innerHTML' of null

Answer 1

在页面加载时，你可以这样做。

document.addEventListener("DOMContentLoaded", function(event) {
    document.querySelector('.buttonclassname').innerHTML = 'New text';
    // or an id
    document.querySelector('#buttonid').innerHTML = 'New text';
});

注意，以下查找特定元素的方法当然也可用于页面加载

根据评论更新2

点击按钮有几个选项。

如果要定位的按钮在任何方面都不是唯一的（并且您可以访问html），则可以像这样附加内联处理程序

function changeText(elem) {
    elem.innerHTML = 'New text';
}

<button onclick="changeText(this)">Old text</button>
<button>Old text</button>
<button>Old text</button>
<button>Old text</button>
<button>Old text</button>

如果您无法访问html（并且没有唯一性，例如id或类），则可能仍然存在唯一性。

总是3：rd按钮，这样做

var btn = document.querySelectorAll("button");
if (btn.length > 2) {
  btn[2].addEventListener("click", function(e) {
    e.target.innerHTML = 'New text';
  });
}

<button>Old text</button>
<button>Old text</button>
<button>Old text</button>
<button>Old text</button>
<button>Old text</button>

该按钮包含一个已知的唯一文字/单词

Array.prototype.slice.call(document.querySelectorAll("button")).forEach(function(btn) {
  btn.addEventListener("click", function(e) {
    if (e.target.innerHTML.indexOf('different') > -1) {
      e.target.innerHTML = 'New text';
    }
  });
});

<button>Old text</button>
<button>Old text</button>
<button>Old text</button>
<button>Old text is different</button>
<button>Old text</button>

使用Javascript更改span的文本 - 没有“OnClick”

1 个答案: