[英]Change text of span with Javascript - without "OnClick"
I use Squarespace, and have a button on my site that I want the text to change on.我使用 Squarespace,并在我的网站上有一个按钮,我希望更改文本。
I don't have access to the html, but I can do "javascript::" style stuff with the "button" element.我无权访问 html,但我可以使用“button”元素执行“javascript::”样式的内容。 Link to Image
图片链接
I tried this.innerhtml
, but it didn't work.我试过
this.innerhtml
,但没有用。
I've also tried:我也试过:
<script>
function changeText(boxID)
{
document.getElementById($(boxID).attr("id")).innerHTML = 'stuff';
}
</script>
and calling javascript::changeText()
, but that didn't work.并调用
javascript::changeText()
,但这不起作用。
Its a square space site, so I can't change ID name, and they change every time I change anything on the website.它是一个方形空间站点,因此我无法更改 ID 名称,并且每次我更改网站上的任何内容时它们都会更改。 The class names for buttons will select all buttons, so that won't work either.
按钮的类名将选择所有按钮,因此这也不起作用。
Update: This on the button in the little link thing: javascript:changeText(this);
更新:这个在小链接的按钮上:
javascript:changeText(this);
This in the code injection panel:这在代码注入面板中:
<script>
function changeText(box)
{
var boxID = box.id;
alert(box.id);
console.log('element id = ' + id);
document.getElementById(boxID).innerHTML = 'stuff';
}
</script>
I get error (index):80 Uncaught TypeError: Cannot set property 'innerHTML' of null
我收到错误
(index):80 Uncaught TypeError: Cannot set property 'innerHTML' of null
错误(index):80 Uncaught TypeError: Cannot set property 'innerHTML' of null
At page load you can do like this.在页面加载时,您可以这样做。
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelector('.buttonclassname').innerHTML = 'New text';
// or an id
document.querySelector('#buttonid').innerHTML = 'New text';
});
Note, the below ways to find a particular element can of course also be used on page load请注意,以下查找特定元素的方法当然也可以用于页面加载
Update 2 based on comments根据评论更新 2
At button click there is a few options.单击按钮时有几个选项。
If the button to target isn't unique in any way (and you have access to html), an inline handler can be attached like this如果要定位的按钮在任何方面都不是唯一的(并且您可以访问 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>
If you don't have access to the html (and no uniqueness, like an id or class), there might still be uniqueness.如果您无权访问 html(并且没有唯一性,例如 id 或类),则可能仍然存在唯一性。
It is always the 3:rd button, do like this它总是 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>
The button contains a know unique text/word该按钮包含一个已知的唯一文本/单词
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.