hrefをクリックすると、パラメータを含むJavaScript関数を呼び出します

Question

パラメータを取得するJavaScript関数を使用してhrefタグを作成するコードを作成しようとしています。パラメータは文字列で、オブジェクトはjson文字列に変換されます。 私の試みは、このようなものだった：誰かが私が間違っているのか説明していただけます

<a style="text-decoration:underline;cursor:pointer" target="_blank" href="javascript:goToStateNewWindow('trending', '{" projectid":2313,"alarmsonly":"true"}')"="">test</a> 

：では、それはこのように見えたウィンドウを点検

Uncaught SyntaxError: Invalid or unexpected token

：

return '<a style="text-decoration:underline;cursor:pointer" target="_blank"' + 
        ' href="javascript:goToStateNewWindow(\'trending\', \'' + JSON.stringify(params) + '\')">' + value + '</a>'; 

エラーました？

Answer 1

Can someone please explain what I am doing wrong?

申し訳ありません。しかしすべて。要素を作成する方法は次のとおりです（例：関数内で。あなたも前にCSSで要素のスタイルを設定でき

var a = document.createElement('a'); 
var t = document.createTextNode(value); 
a.appendChild(t); 
a.style.textDecoration = 'underline'; 
a.style.cursor = 'pointer'; 
a.setAttribute("target", "_blank"); 
document.body.appendChild(a); // or any other element you want the a to appear in 
a.addEventListener("click", function(e) { 
    e.preventDefault(); 
    goToStateNewWindow('trending', params); 
}); 

注...まず

Answer 2

は、それが<a>要素であってもよいが、<button>べきではありません。必要に応じて、CSSを使用して<a>のようにすることができます。

document.createElement()を使用してen要素を作成し、属性を追加し、addEventListener()メソッドを使用してクリックイベントリスナーを指定する必要があります。

const element = document.createElement('button') 
element.setAttribute('type', 'button') 
element.setAttribute('style', 'text-decoration:underline;cursor:pointer;') 
element.setAttribute('target', '_blank') 
element.addEventListener('click', event => goToStateNewWindow('trending', params)) 
element.innerHTML = value 

return element.outerHTML 

Answer 3

なぜ機能しないのか説明したいと思います。あなたのHTMLにはhref="javascript:...があります。JSON.stringify(params)を呼び出すと、{"projectid":2313,"alarmsonly":true}が返され、href="（{"）の後の最初の二重引用符でジャバスクリプトパーサーが停止し、残りの部分（projectid":2313,"alarmsonly":true}...）が無効なjavascriptになります。

二重引用符を一重引用符で置き換えて機能させた関数を作った。オブジェクトが二重引用符で囲まれた文字列値を持つ場合、機能しない可能性があります。予期しないトークンだったもの

function goToStateNewWindow(route, body){ 
 
    console.log('Route: ', route); 
 
    console.log('Params: ', body); 
 
} 
 

 
function doublequotetosingle(obj) { 
 
    return JSON.stringify(obj).replace(/"/g, "'");; 
 
} 
 

 
function test(params, value) { 
 
    return '<a style="text-decoration:underline;cursor:pointer" target="_blank"' + 
 
    ' href="javascript:goToStateNewWindow(\'trending\',' + doublequotetosingle(params) + ')">' + value + '</a>'; 
 

 
} 
 

 
document.body.insertAdjacentHTML('beforeend', test({ projectid: 2313, alarmsonly: true }, 'test'));