import { createResource, createSignal } from 'solid-js'
import './App.css'

function App() {
  const [floatingTextContent, setFloatingTextContent] = createSignal<string>("some text to see the floating");
  const [textBoxScrollWidth, setTextBoxScrollWidth] = createSignal<number>(0);

  let checkScrollWidth = (event) => {
    let textBoxValue:string = event.target.value;
    let textBoxScrollWidth:number = event.target.scrollWidth;
    if(textBoxValue.length < 5) {
      setTextBoxScrollWidth(textBoxScrollWidth);
    }
    if(textBoxScrollWidth() != textBoxScrollWidth) { // This one is broken, see error below
      // Wait untill the word is finished
      if(textBoxValue[textBoxValue.length-1] == " ") {
        setFloatingTextContent(textBoxValue);
        let floatingTextElem = document.getElementById("floatingText");
        
        textBoxValue = "";
      }
    }
  }

  return (
    <main>
      {/* <label for="textbox">Pour your heart out to the stars</label> */}
      <span id="floatingText">{floatingTextContent()}</span> {/* This one works as expected */}
      <input type="text" id="textbox" name="textbox" oninput={checkScrollWidth} />
      {/* <button onClick={debug}>debug</button> */}
    </main>
  )
}

export default App

import { createResource, createSignal } from 'solid-js'
import './App.css'

function App() {
  const [floatingTextContent, setFloatingTextContent] = createSignal<string>("some text to see the floating");
  const [textBoxScrollWidth, setTextBoxScrollWidth] = createSignal<number>(0);

  let checkScrollWidth = (event) => {
    let textBoxValue:string = event.target.value;
    let textBoxScrollWidth:number = event.target.scrollWidth;
    if(textBoxValue.length < 5) {
      setTextBoxScrollWidth(textBoxScrollWidth);
    }
    if(textBoxScrollWidth() != textBoxScrollWidth) { // This one is broken, see error below
      // Wait untill the word is finished
      if(textBoxValue[textBoxValue.length-1] == " ") {
        setFloatingTextContent(textBoxValue);
        let floatingTextElem = document.getElementById("floatingText");
        
        textBoxValue = "";
      }
    }
  }

  return (
    <main>
      {/* <label for="textbox">Pour your heart out to the stars</label> */}
      <span id="floatingText">{floatingTextContent()}</span> {/* This one works as expected */}
      <input type="text" id="textbox" name="textbox" oninput={checkScrollWidth} />
      {/* <button onClick={debug}>debug</button> */}
    </main>
  )
}

export default App

This expression is not callable.
  Type 'Number' has no call signatures.ts(2349)
let textBoxScrollWidth: number

This expression is not callable.
  Type 'Number' has no call signatures.ts(2349)
let textBoxScrollWidth: number