使用 Javascript 更改跨度文本 - 沒有“OnClick”

Question

我使用 Squarespace，並在我的網站上有一個按鈕，我希望更改文本。

我無權訪問 html，但我可以使用“button”元素執行“javascript::”樣式的內容。 圖片鏈接

我試過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錯誤(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>