javascript enter a value in textbox check my code

I am trying to fill in a text box on a browser using the code I have.
It adds the value to the text box but as soon as I click text box it disappears.

Looking at the Firefox element checker I can see the actual value =”” in HTML not changing only the front of html being inputted.

here is the code i have and html.

here is the javascript code am using

document.getElementsByClassName(
  'appearance-none block w-full px-3 py-2.5 border placeholder-gray-400 focus:outline-none text-sm rounded-lg border-gray-200 focus:ring-1 focus:border-transparent focus:ring-purple-1'
)[0].value = 'your value';

here is part of the html

<input
    class="appearance-none block w-full px-3 py-2.5 border placeholder-gray-400 focus:outline-none text-sm rounded-lg border-gray-200 focus:ring-1 focus:border-transparent focus:ring-purple-1"
    placeholder="Artificial Intelligence in Copywriting" 
    value="">

extra code

<div><div class="flex justify-between items-center relative w-full"><div class="flex flex-wrap mb-1 items-center "><label class="block text-base font-medium text-gray-700">Title</label><span class="ml-1 text-red-500">*</span></div><p class="text-xxs font-medium text-gray-400">1 / 200</p></div><div class="flex items-center"><div class="relative w-full"><input class="appearance-none block w-full px-3 py-2.5 border placeholder-gray-400 focus:outline-none text-sm rounded-lg border-gray-200 focus:ring-1 focus:border-transparent focus:ring-purple-1" placeholder="Artificial Intelligence in Copywriting" value=""></div></div></div>