Question

我有一个非常基本的HTML，用户输入-webkit-transition之类的内容，该函数返回WebkitTransition之类的内容。

<div id='app'>Change input to camelCase</div>
<input id='getInput' />
<button id='submit' />get result</button>
<span id="output">Result: </span>

相关的JS是这样的：

//   initializing the input field value var  let inputed = getInput.value;


 // this is the function, it should take the input.value as argument
  function whatComesOut (str) {
  return str
    .split('-') 
    .map( 
      (word, index) => index == 0 ? word : word[0].toUpperCase() + word.slice(1)
    ) 
    .join(''); 
}

 // updating the input value on change, this logs the correct input value
 getInput.addEventListener('change', function(e){
 let inputed = e.target.value;
 console.log(inputed);

  })
 // on click I want to display the returned value from the function in the span element
 submit.addEventListener('click', function(){

 console.log(inputed);
 output.innerHTML += whatComesOut(inputed); 
 })

但是，什么也没有发生，控制台中也没有错误。

指向密码笔的链接 https://codepen.io/damPop/pen/PxYvJr?editors=0010

问题是，如何从span元素中显示的whatComesOut函数获取返回值？我需要在某个地方传递事件对象吗？

Answer 1

这里的问题是，与getInput上的事件侦听器不同，inputed的值未在submit事件侦听器中声明，因此它使用分配的静态值在第5行上。如果在const inputed = getInput.value;之前添加output.innerHTML += whatComesOut(inputed);，则可以使用。

Answer 2

您需要使输入的变量成为全局变量，而不是仅将事件侦听器函数局部化。另外，将按钮的类型更改为“按钮”，这样它就不会提交表单并刷新页面。

//   initializing the input field value var  let inputed = getInput.value;

 let inputed; 
 // this is the function, it should take the input.value as argument
  function whatComesOut (str) {
  return str.split('-').map( 
      (word, index) => index == 0 ? word : word[0].toUpperCase() + word.slice(1)
    ).join(''); 
}

 // updating the input value on change, this logs the correct input value
 getInput.addEventListener('change', function(e){
  inputed = e.target.value;
 console.log(inputed);

  })
 // on click I want to display the returned value from the function in the span element
 submit.addEventListener('click', function(){

 console.log(inputed);
 output.innerHTML += whatComesOut(inputed); 
 })

Answer 3

您已经声明了已输入的全局变量，并且该变量已在“事件”之一中重新声明，因此，这使得初始化必须在Event（本地范围）内进行。本地范围变量的初始化未更改全局变量。

var global = 'it's global now'

function func() { var local = 'its local variable'}

可以在本地范围内访问全局范围变量，您可以对其进行更改，因为它不是常量声明。

删除第19行中的let，删除第26行，并删除字符串串联，以避免在 28行中重复，这应该起作用。

getInput.addEventListener('change', function(e){
  inputed = e.target.value;

})

  submit.addEventListener('click', function(){

   output.innerHTML = camelise(inputed); 
 })

不显示驼峰功能输出，不引发错误

3 个答案: