1

I'm trying to create a simple IDE, all it will do is colour code certain syntax. Right now I'm trying to figure out how to replace something like var with <span id="var">var</span>. The .replace() works when the page firsts loads, but not after you start typing, even though it's running on an interval.

The live code is here codepen.io/Alanay/pen/goLgdx

Here's just the JS:

document.getElementsByTagName('div')[0].contentEditable = 'true';

function syntax() {
  var div = document.getElementsByTagName('div')[0].innerHTML;
  var res = div.replace("IDE", "Test");
  document.getElementsByTagName('div')[0].innerHTML = res;
}
setInterval(syntax(), 500)
sweetroll
  • 331
  • 3
  • 12
  • `setInterval(syntax, 500)` (as stated in the docs: https://developer.mozilla.org/de/docs/Web/API/WindowTimers/setInterval) –  Dec 24 '17 at 02:04
  • No idea how but it worked, thanks! Any idea how to make it stop typing from the front now though? – sweetroll Dec 24 '17 at 02:05
  • 1
    You need to pass the function itself, which is `syntax`. What you did was pass its return value, which is `undefined`. As for your follow-up: do the research. Lots of it. Posting a question here is that absolute *last* thing you want to do. –  Dec 24 '17 at 02:11
  • Possible duplicate of [setInterval not working (firing only once) in Google Chrome extension](https://stackoverflow.com/questions/8971871/setinterval-not-working-firing-only-once-in-google-chrome-extension) – Ron Dec 24 '17 at 02:12
  • Thanks, and I will reseach on it. I think this will be a fun project. – sweetroll Dec 24 '17 at 02:12
  • Tip: think about function definition and reference as separate from function execution. When you use `setInterval`, you want to just pass a reference to the function, because you're saying *"don't execute it immediately, but later"*. Whenever you see parenthesis `()`, it's a clue that function is execution happening right there, so you're actually passing the **return value** to setInterval - in this case the original code is the same as `setInterval(undefined, 500)`. That's why nothing is happening! – David Calhoun Dec 24 '17 at 02:24

2 Answers2

1

Let's I will explain why it hadn't worked with your code.

The setInterval method takes 2 params, the function you want to run and delay of next execution in milliseconds.

When you call the function with parentheses like syntax() it will give you the function output i.e

In below code the sum function does summation of 2 numbers and showing it in span element.

Basically return statement stops function execution and gives output.

function sum(a, b) {
    return a + b
}

// will print 3;
let sumDiv = document.getElementById('sum');
sumDiv.innerHTML = sum(1, 2);
The sum is <span id='sum'></span>

If you don't have return statement, the function automatically will return undefined.

In the below code I am doing addition of 2 numbers, but not returning them and function returns undefined.

function sum(a, b) {
    a + b
}

// will print 3;
let sumDiv = document.getElementById('sum');
sumDiv.innerHTML = sum(1, 2);
The sum is <span id='sum'></span>

Let's return to setInterval and to our syntax function.

When you call setInterval(syntax(), 500), your syntax() function executes and returns undefined as setInterval first argument function.

You just need to pass your syntax function without calling.

setInterval(syntax, 500)

The above code will work, because you are just passing your function to be executed each 500 milliseconds, instead of it's returned value which is undefined and will cause wrong behavior.

You can read more about undefined type and return statement here and here respectively. They are very important parts of JavaScript and I suggest you to spend little bit time to read about them.

Aren Hovsepyan
  • 1,947
  • 2
  • 17
  • 45
0

your syntax is wrong. Just set it to setInterval(functionname_without_paranthesis, time_in_ms).

Just set it to setInterval(syntax, 500)

Vipin Mohan
  • 1,631
  • 1
  • 12
  • 22