You must make sure you listener for the svgfile object is outside the onclick function for your button otherwise you can only ever click on the svgfile object whenever you are simultaneously clicking on the button.

By doing setName("clicked") you instantly call the setName function instead of passing a reference to the function. You can solve this passing a function as the event handler argument in which you call setName("clicked").

function button5_makeClickable(id) {
    var drawing = document.getElementById('svgfile'); 
    drawing.addEventListener('click', function() {
      setName("clicked")
    });
}

But, your code currently is constantly adding event listeners to the <object> element. The element only needs 1 click event listener.

Use a flag. This a boolean (true / false) which acts like a switch to do or to not do something based on its value. Add a event listener to the <object> element and check in the event handler if the flag is true. If it is, change the text inside your span, if it isn’t, don’t do anything.

The example below shows how this could work.

Also, prevent using inline event listeners in your HTML. Using addEventListener is the way you should be learning how to attach event handlers.

var myButton5 = document.getElementById('myButton5');
var drawing = document.getElementById('svgfile');
var svgIsClickable = false;

function setName(name) {
  var elementHtmltoFill = window.document.getElementById("id_to_be_replaced");
  console.log(elementHtmltoFill)
  elementHtmltoFill.innerHTML = name;
}

function button5_makeClickable(event) {
  svgIsClickable = true;
}

myButton5.addEventListener('click', button5_makeClickable);
drawing.addEventListener('click', function() {
  if (svgIsClickable === true) {
    setName("clicked");
  }
});

object {
  display: block;
  width: 50px;
  height: 50px;
  background: gray;
}

<div>
  <p>This will be replaced <br/>
    <span id="id_to_be_replaced" style="color: red; font-weight: bold;"> Replaced normally </span>.</p>
</div>

<br />
<input name="button5" type="button" id="myButton5" onClick="button5_makeClickable" value="4. Svg clickable" />
<br />

<div>
  <object id="svgfile" data="exemple.svg" type="image/svg+xml"> </object>
</div>

Here is my objective :
I want to have a button on my html page that when it is clicked, makes and svg clickable, and when that svg is clicked, the page displays the message “clicked”.

I have an html file where I create a button and a div that holds an svg file :

HTML File

*....*

 <div>
        <p>This will be replaced <br/>
            <span id="id_to_be_replaced" style="color: red; font-weight: bold;"> Replaced normally </span>.</p>
</div>

*....*

<br />
        <input name="button5" type="button" id="myButton5" onClick="button5_makeClickable('svgfile');" value="4. Svg clickable" />
<br />

*....*

<div>
        <object id="svgfile" data = "exemple.svg" type="image/svg+xml"> </object> 
</div>

What I want is that when I press my button5 it is supposed to make the svg file clickable, the function that I call are in another javascript file :

JS File

*....*

function setName(name) {
    var elementHtmltoFill = window.document.getElementById("id_to_be_replaced");
    elementHtmltoFill.innerHTML = name;
}

*....*

function button5_makeClickable(id) {
    var drawing = document.getElementById('svgfile'); 
    drawing.addEventListener('click', setName("clicked"));
}

*....*

However what happens is that “clicked” is displayed as soon as I click on the button (and not the svg).
I don’t understand why since I add the event listener to drawing (therefore the svg)?

Thank you for your help !

PS : I am trying to understand the use of the function addEventListener, so I would prefer if your help uses it please.