admin管理员组

文章数量:1305230

I'm trying to pass url through onclick event, its not working. there is <body onload="displayBookmarks()"> to initialise displayBookmarks function as soon as the page gets loaded

function deleteBookmark(url){
    alert(url);
};

function displayBookmarks(){
    bookmarksResults.innerHTML = "";
    for (let a in bookmarks){
        let name = bookmarks[a].name;
        let url =  bookmarks[a].url;
        bookmarksResults.innerHTML += `<div class="well"> <h3> ${name} <a class="btn btn-default" target="_blank" href=${url} >Visit</a>  <a onclick=${deleteBookmark(url)} class="btn btn-danger" >Delete</a></h3></div>`
    }
}

The main problem is onclick=${deleteBookmark(url)} As soon as the page loads it starts displaying the url but I want to to be shown only when delete button is pressed.

I'm trying to pass url through onclick event, its not working. there is <body onload="displayBookmarks()"> to initialise displayBookmarks function as soon as the page gets loaded

function deleteBookmark(url){
    alert(url);
};

function displayBookmarks(){
    bookmarksResults.innerHTML = "";
    for (let a in bookmarks){
        let name = bookmarks[a].name;
        let url =  bookmarks[a].url;
        bookmarksResults.innerHTML += `<div class="well"> <h3> ${name} <a class="btn btn-default" target="_blank" href=${url} >Visit</a>  <a onclick=${deleteBookmark(url)} class="btn btn-danger" >Delete</a></h3></div>`
    }
}

The main problem is onclick=${deleteBookmark(url)} As soon as the page loads it starts displaying the url but I want to to be shown only when delete button is pressed.

  • javascript
  • ecmascript-6
Share Improve this question edited Jul 16, 2017 at 15:25 try-catch-finally 7,6346 gold badges49 silver badges71 bronze badges asked Jul 16, 2017 at 14:01 sskumarsskumar 311 silver badge5 bronze badges 3
  • 2 Simple: Don't use html strings and inline event handlers. Template literals are not your real problem. – Bergi Commented Jul 16, 2017 at 14:03
  • Why are you using an interpolation for the value of the event handler attribute? You indeed don't want to call the function when constructing the string. You want a literal onclick="deleteBookmark(url)" to appear in the HTML. – Bergi Commented Jul 16, 2017 at 14:05
  • ... ${deleteBookmark(url)} ... is immediately evaluated when the template literal is defined. Since deleteBookmark(url) is a function invocation expression, this is the cause of your problem. The ${...} inside backticks evaluates Javascript code. – try-catch-finally Commented Jul 16, 2017 at 15:28
Add a ment  | 

2 Answers 2

Reset to default 4

I've found that there is another way to do this with encapsulation. I don't know if I would remend doing it like this at all but since you've asked the question.

const app = document.getElementById("app");

const button = ((app) => {
  
  let _url;
  
	const _log = (data) => {
  	console.log(data);
  }
  
  let _content = `<button onclick="(${_log})('${_url}')">test</button>`;
  
  const _setContent = () => {
  	_content = `<button onclick="(${_log})('${_url}')">test</button>`;
  }
  
  const _setUrl = (url) => {
  	_url = url;
  }
  
  return {
  	setUrl: (url) => {
    	_setUrl(url);
      _setContent();
    },
  	render: () => {
    	app.innerHTML = _content;
    }
  }
})(app)

const url =  'www.something.';
button.setUrl(url);
button.render();
<section id="app">...</section>

const markUp = `
    <button onclick="myFunction()">Click me</button>
`;

document.body.innerHTML = markUp;

window.myFunction = () => {
    console.log('Button clicked');
};

本文标签： javascriptPassing onclick event in template literalStack Overflow

版权声明：本文标题：javascript - Passing onclick event in template literal - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741768709a2396619.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。